React 성능 개선 하기

 

크롬 확장 프로그램 설치 하면 (React Developer Tool)

component, profiler 생김

아래 그림에서 각각 컴포넌트 A, B 별 렌더 시간 나옴

 

 

 

 

React.memo 사용하여 성능 개선 

const Message = React.memo(({ message }) => {
    return <p>{message}</p>
})

 

useCallback 활용한 함수 최적화 

아래 처럼 감싸서 함수 전달 하면 값, 참조 위치 등이 변할 때만 렌더링 됨

const B = ({message, posts}) => {
    console.log("B is rendered");
    const testFunc = useCallback(() => {}, []);

  return (
    <div>
        <h1>B Component</h1>
        <Message message={message} />
        <List post={posts} testFunc={testFunc}/>
    </div>
  )
}

 

useMemo 활용한 결과값 최적화

결과값이 바뀌지 않으면 렌더링 되더라도 연산 하지 않음

function Component({a, b}) {
    const result = useMemo(()=>compute(a,b,[a,b]))
    return <div>{result}</div>
}