📌 리액트에서의 렌더링이란?
▶️ 1. Render Phase
- 첫번째 렌더링이 아니라면, 재조정 과정을 거친 후 Real DOM에 변경사항을 체크
▶️ 2. Commit Phase
- 변경사항을 Real DOM에 반영해주는 단계
📌 렌더링 최적화 방법
▶️ 브라우저 렌더링
▶️ 리액트에서의 렌더링
▶️ 불필요한 리렌더링 발생
▶️ 웹사이트 컴포넌트 어떻게 렌더링되는지 확인
▶️ 리렌더링 조건
- state 또는 props 변경 시
useCallback은 함수를 메모이제이션(기존 수행 연산 결과값 저장 후 재사용) 해주는 훅.
useMemo은 값 메모이제이션(기존 수행 연산 결과값 저장 후 재사용) 해주는 훅.
▶️ useCallback
- useCallback을 사용해도 리렌더링이 됨
- 그러나 최적화에 효과는 있음
▶️ React.memo
▶️ useMemo
▶️ useCallback, useMemo, React.memo를 모든 곳에서 사용해주면 좋을까요?
-
useCallback
이 훅은 함수를 메모이제이션하고, 의존성 배열에 있는 값들이 변경될 때만 함수를 다시 생성합니다. 이 작업은 함수의 재생성과 메모리 할당을 수반할 수 있습니다. 따라서 너무 많은 함수가 불필요하게 재생성되면 성능에 부담이 될 수 있습니다. -
useMemo
이 훅은 계산 비용이 높은 값을 캐시하고, 의존성 배열에 있는 값들이 변경될 때만 해당 값을 다시 계산합니다. 계산 비용이 높은 경우에만 사용되기 때문에, 불필요하게 많은 값이 캐시될 경우 메모리 사용량이 증가할 수 있습니다. -
React.memo
이 함수 컴포넌트 래퍼는 입력 프롭스(props)가 변경될 때만 다시 렌더링됩니다. 이를 위해 내부적으로 얕은(prop shallow) 비교를 수행하여 프롭스의 변경 여부를 확인합니다. 이 얕은 비교 작업은 객체나 배열과 같은 복잡한 데이터 구조에서 비용이 들 수 있습니다.
따라서 이러한 도구들은 내부적으로 비용이 들 수 있으며, 과도하게 사용하는 경우 성능에 부담이 될 수 있습니다. 따라서 최적화를 위해 이러한 도구를 사용할 때에는 실제로 필요한 상황에서만 사용하도록 주의해야 합니다. 불필요한 최적화를 피하고 성능 개선을 위한 올바른 판단이 중요합니다.
📌 정리
▶️ useCallback VS useMemo VS React.memo
-
useCallback 예시
- 콜백 함수를 자식 컴포넌트에 props로 전달할 때, 불필요한 리렌더링을 방지하고 성능을 향상시키기 위해 useCallback을 사용
-
useMemo 예시
- 계산이 많이 필요한 데이터 변환 또는 연산 결과를 캐시하여 불필요한 계산을 방지하고 성능을 향상시킬 때 useMemo을 사용
-
React.memo 예시
- 성능 최적화 목적으로, props가 변경되지 않으면 다시 렌더링을 방지하고자 할 때 React.memo를 사용
-
useCallback은 함수 메모이제이션, useMemo는 값 메모이제이션, React.memo는 컴포넌트 메모이제이션을 담당합니다. 이러한 도구들은 불필요한 리렌더링을 방지하고 React 애플리케이션의 성능을 최적화하는 데 도움이 됩니다. 그러나 각각의 사용 사례와 적절한 시나리오에 대한 이해가 중요하며, 과도하게 사용하는 것은 오히려 코드를 복잡하게 만들 수 있으므로 주의해야 합니다.
출처 - https://www.youtube.com/watch?v=1YAWshEGU6g&list=TLPQMDMxMDIwMjMMYR6cyw3joA&index=2
