React.memo
-
[ React ] 렌더링 성능 최적화 - React.memoTIL 2024. 2. 6. 21:15
리렌더링의 조건은 다음과 같다. 1. 컴포넌트에서 state가 바뀌었을 때 2. 컴포넌트가 내려받은 props가 변경되었을 때 3. 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링 리액트에서 리렌더링이 빈번하게, 자주 일어난다는 것은 좋지 않은 사실이다. 리렌더링이 자주 일어나는만큼 비용이 많이 발생하기 때문이다. 이러한 문제를 해결하는 것이 최적화(Optimization) 이라고 부른다. 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법은 - memo (React.memo) : 컴포넌트를 캐싱 - useCallback : 함수를 캐싱 - useMemo : 값을 캐싱 이렇게 3가지이다. 오늘은 memo (React.memo) 에 대해 알아보려한다. - 1번 컴포넌트가 리렌더링 된..