React Profiler

 

● 리액트 프로파일러란?

React Profiler는 React 16.5에서 새로운 DevTools 프로파일러 플러그인에 대한 지원을 추가한다.

이 플러그인은 React의 Profiler API를 사용하여 React 애플리케이션의 성능 병목 현상을 식별하기 위해 렌더링되는 각 구성 요소에 대한 타이밍 정보를 수집한다.

 

 

 

● 리액트 프로파일러를 이용한 성능 측정하기

React Profilers를 이용해서 성능을 측정하기 위해서 두 개의 컴포넌트를 생성한 후에 성능을 비교해본다.

 

1) 폴더 생성

 

 

 

2) 리액트 설치 -> npx create-react-app./

 

새로운 폴더를 실행 시켜주기 위해 visual studio를 열어준다.

(해당 폴더 주소창에 cmd를 열어 code . 을 입력해도 되고 visual studio를 먼저 연 다음 해당 폴더를 가져와 visual studio에 드래그 드롭 해줘도 된다.)

 

터미널을 열어주기 위해 상단 바의 Terminal -> New Terminal을 눌러 준다.

 

 

나타난 터미널 창에 npx create-react-app ./ 을 입력하여 현재 경로를 명시해주면

리액트 설치가 된다.

 

 

 

 

3) 전체 구조 생성

필요 없는 부분은 삭제하고 실행을 할껀데 

두 개의 컴포넌트 성능을 비교하기 위해 A 컴포넌트와 B 컴포넌트 이렇게 두 개를 만들어 볼 것 이다.

(A 컴포넌트는 간단한 컴포넌트로 만들고, B 컴포넌트는 여러 개로 컴포넌트를 나누어서 성능 비교를 해볼 것 이다.)

 

 

< 실습 >

App.test.js 는 Delete로 지워주고

App.js는 안에 내용을 알맞게 지워 아래 사진처럼 만들어 준다.

 

 

그리고 src에 마우스 우클릭하여 New Folder로 새로운 폴더를 만들어 준다.

 

그리고 만든 components 폴더를 우클릭하여 New File로 두개의 컴포넌트를 만들어 준다.

 

 

 

 

그리고 안에 함수형 컴포넌트를 A, B 모두 만들어 준다.

A.js

 

 

B.js

 

 

 

4) 가짜 데이터 가져오기

성능을 측정하기 위해서는 어느 정도 많은 데이터가 있을 시에 측정이 가능하기에 가짜 데이터를 전달해주는 곳에 요청을 보내서 가짜 데이터를 받아오면 된다.

(브라우저에서 jsonplaceholder라는 api 서버에 user data, post 데이터 등을 전달해주세요. 라고 요청하는 것)

 

https://developer.mozilla.org/en-US/docs/Web/API/fetch

 

Response는 HTTP 응답 전체를 나타내는 객체로, JSON 본문 콘텐츠를 추출하기 위해서는 json() (en-US) 메서드를 호출해야한다.

 

 

● useEffect

: 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook.

  여기서는 App 컴포넌트가 한 번 렌더링 된 후에 jsonplaceholder 라는 곳의 서버에 비동기 요청을 보내서 posts 데이터를    가져오기 위해서 사용됐다.

  현재는 profiler를 살펴보는 부분에 집중하기 위해서 나중에 useEffect에 대해서 더 자세히 알아보도록 한다.

 

 

● fetch() 메소드

- 원격 API에 요청을 보내기 위해 사용할 수 있는 메소드

- 전역 fetch() 메서드는 네트워크에서 리소스를 가져오는 프로세스를 시작하여 Response 응답을 사용할 수 있게 되면

  이행된 Promise 약속을 Return 반환한다.

 

 

● jsonplaceholder

- JSONPlaceholder는 가짜 데이터가 필요할 때마가 사용할 수 있는 무료 온라인 REST API.

- posts, users, photos 등 여러가지 가짜 데이터를 가져올 수 있다.