React 확장 프로그램

리액트 프로파일러를 이용한 성능 측정하기
React Profilers를 이용해서 성능을 측정하기 위해서 두 개의 컴포넌트를 생성한 후에 성능을 비교

폴더 설치 -> 리액트 설치 -> 전체 구조 생성

• 가짜 데이터 가져오기

원격 API
https://jsonplaceholder.typicode.cpm/posts

• 가짜 데이터가 필요할 때마다 사용할 수 있는 무료 온라인 REST API
• posts, users, photos 등 여러 가지 데이터를 가져올 수 있습니다

useEffect?

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

useEffect () ⇒ {
		fetch(’https://jsonplaceholder.typicode.cpm/posts’)
		
		then(response ⇒ response.json())
		then(posts => setPosts(posts));
}, []);

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

React.memo()?

• React는 먼저 컴포넌트를 렌더링 한 뒤 이전에 렌더링 된 결과와 비교 후 다른 부분만 DOM에 적용
• 컴포넌트를 React.memo로 둘러 쌀 경우 React는 컴포넌트를 렌더링하고 결과를 메모이징
• 렌더링 시 렌더링하는 컴포넌트의 props가 같을 경우 메모지이된 내용 재사용