리액트 개발할 때 유용한 확장프로그램 다운로드
크롬 웹스토어에서 다운로드 가능.
링크
브라우저 개발자 도구에서 React컴포넌트 트리를 검사할 수 있다
리액트 프로파일러 (React profiler)
React 16.5에서 새로운 DevTools 플러그인에 대한 지원 추가.
React의 Profiler API를 사용해서 React 애플리케이션의 성능병목현상을 식별하기 위해 렌더링 되는 각 구성요소에 대한 타이밍 정보를 수집
가짜 데이터 가져오기
어느정도 많은 데이터가 있을 시에 측정이 가능하기에, 가짜 데이터를 전달해 주는 곳에 요청을 보내서 받아오는 것도 필요
useEffect
컴포넌트가 렌더링될때 특정 작업을 실행할 수 있도록 하는 hook
여기선 App캠포넌트가 한번 렌더링 된 후에 jsonplaceholder라느 곳의 서버에 비동기요청을 보내서 posts데이터를 가져오기 위해서 사용됨
fetch() 메서드
원격 API에 요청을 보내기 위해 사용할 수 있는 메서드
전역 fetch()는 네트워크에서 리소스를 가져오는 프로세스를 시작하여 Response응답을 사용할 수 있게되면 이행된 promise를 return 한다.
jsonplaceholder
가짜 데이터가 필요할 때마다 사용할 수 있는 무료 온라인 REST API
posts, users, photos 등 여러 가짜 데이터를 가져올 수 있다
성능 측정 위한 app 구현
App.js
- 데이터 가져오기 : useEffect 부분
- 검색창 : <input>
- 전체적인 레이아웃
import './App.css';
import React, { useEffect, useState } from'react';
import B from './component/B';
import A from './component/A';
function App() {
const [value, setValue] = useState("");
const [posts, setPosts] = useState([]);
useEffect(() => {
.then( resp => resp.json() ) // 통으로 올때, json포맷받기위해서
.then( posts => setPosts(posts) )
}, [])
return (
<div style={{padding: '1rem'}}>
<input value={value} onChange={ e => setValue(e.target.value)} />
<div style={{display: 'flex'}}>
<A message={value} posts={posts} />
<B message={value} posts={posts} />
</div>
</div>
);
}
export default App;
A와 B , 2개 컴포넌트를 표시
A.js : 모든 요소를 하나의 컴포넌트에
function A({message, posts}) {
return (
<div>
<h1>A Component</h1>
<p>{message}</p>
<ul>
{posts.map(post=> {
return (
<li key={post.id}>
<p>{post.title}</p>
</li>
)
})}
</ul>
</div>
)
}
export default A;
B.js : 모든 요소를 여러 컴포넌트로 나눠주기
const Message = ({message}) => {
return (
<p>{message}</p>
)
}
const ListItem = ({post}) => {
return (
<li key={post.id}>
<p>{post.title}</p>
</li>
)
}
const List = ({posts}) => {
return (
<ul>
{posts.map( post =>
<ListItem key={post.id} post={post} />
)}
</ul>
)
}
const B = ({message, posts}) => {
return (
<div>
<h1>B Component</h1>
<Message message={message} />
<List posts={posts} />
</div>
)
}
export default B;
React profiler로 성능 측정하기
브라우저 개발자 도구 > Profiler 선택, 이후에 레코드 버튼 (아래 파란색 동그라미)을 클릭한다.
컴포넌트가 다시 렌더링 될 때마다 성능을 기록한다.
이후에 다시 레코드 버튼을 누르면 결과가 나온다.
리액트 프로파일러 결과
B컴포넌트가 성능이 떨어짐을 확인함
