React 렌더링 최적화

React.memo

export default React.memo(Category); //videos

내려오는 props가 자주 동일할 때 사용된다. 

props가 변경될 때만 리렌더링하게 개별 컴포넌트를 설정할 수 있어서 렌더링 최적화에 도움이 된다.

그러나 오버헤드 우려가 있어 필요한 컴포넌트에만 적용하도록 한다.

 

react-window

npm install react-window

외부 라이브러리이나 화면에 보이는 부분만 렌더링하도록 한다

몇만개의 데이터가 배열 되어있을때 사용한다.

 

 

useCallback

함수 재사용

useMemo

값 재사용