[React] 비 효율적인 Render 막기

비 효율적인 렌더링을 막는 방법

 

1. 컴포넌트들을 분리해라

2. 말단 컴포넌트들은 memo로 감싸라

3. 연산이 많은 함수의 경우 useMemo로 cashing되도록 해라.

 

memo : 부모 컴포넌트들이 리렌더링 될때 memo를 자식에 감싸면 props가 바뀌지 않는 한 렌더링되지 않는다.

useMemo : hooks안에서 개별 값을 cashing하고 싶다면 사용, cashing을 갱신해야되는 데이터의 경우 deps에 넣어라.