[React] API 호출하고 바인딩하기/React developer tools 소개

<Udemy 리액트 챌린지 3주차>

이정환 강사님의 강의 '한입 크기로 잘라먹는 리액트'를 수강하고 있습니다.

Udemy에서 진행하고 있는 리액트 챌린지에 참여하며 3주차 미션으로 "섹션 6 React 기본 - 일기장 만들어보기"을 수강한 내용을 정리합니다. 👍

---

오늘의 목표

: useEffect를 사용하여 Mount 시점에 API를 호출, 결과값을 일기 데이터의 초기값으로 사용하기

 

1. jsonplaceholder에서 데이터 가져오기

 

(콘솔에 console.log(res); 로 출력하면 500개를 가져온 것을 확인할 수 있다.)

 

1. API를 호출하여 가져온 데이터를 일기 객체 데이터로 가공

  1. async 키워드를 사용하여 API를 호출하는 비동기 함수를 선언한다.
  (jsonplaceholder 사용 : https://jsonplaceholder.typicode.com/comments )

  2. fetch로 가져온 response 값을 json으로 변환하여 반환한다.

  3. 반환받은 json을 20개만 slice하고, map으로 각 요소들을 순환하며 원하는 객체 포맷으로 변환한다.

     👉 API를 호출하여 가져온 데이터를 일기 객체 데이터로 가공 완료!

  4. 일기의 초기값으로 렌더링할 수 있도록 State 설정

 

3. Mount 시에 호출 : useEffect 사용

결과 화면

👉 jsonplaceholder에서 가져온 더미데이터를 성공적으로 렌더링 완료!

---

리액트 개발자의 생산성 향상을 위한 툴

react developer tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en&authuser=2 

React Developer Tools

- Facebook이 직접 만든 tool, 버전 업데이트도 자주 한다!

1. Add to Chrome
2. Chrome의 옵션(브라우저 우측 상단의 점 세개)
>도구더보기>확장프로그램 에서 Switch ON

3. 세부정보 페이지로 이동
> 사이트 엑세스 : '모든 사이트에서'로 설정

> 파일 URL에 대한 엑세스 허용 키기
(시크릿 모드에서 개발하는 경우 시크릿 모드에서도 허용)

 

설정 후 크롬 브라우저 종료 후 재실행!

react developer tools의 기능

개발자 도구(f12) 👉 추가된 기능 : Components, Profiler

 

Components

- 컴포넌트들의 계층 구조를 해석해서 보여줌

- 컴포넌트가 가지고 있는 State, Reference, Effect, Props 등을 볼 수 있다!

- 리스트 각 요소들의 key값까지 볼 수 있다. Wow! 😮

 

ViewSettings

> Highlight updates when components render 체크
- 컴포넌트의 업데이트가 일어날 때마다 (리렌더가 발생할 때), 색상 변화를 통해 리렌더를 알려줌

 

👉 데이터를 확인하며 문제를 확인하고 해결하는데 도움을 받을 수 있다!

 

 

출처 : Udemy '한입 크기로 잘라먹는 리액트' (이정환)