자식 컴포넌트의 렌더링을 최적화하는 방법은?

React에서 자식 컴포넌트 렌더링 최적화 방법

아래는 자식 컴포넌트의 렌더링을 최적화하는 주요 방법을 표로 정리한 내용입니다.

최적화 방법	설명	코드 예시 및 주의사항
React.memo	- 부모 컴포넌트가 리렌더링되어도 props가 변하지 않으면 자식 컴포넌트를 리렌더링하지 않음.	jsx<br>const Child = React.memo(({ value }) => {<br> return <p>{value}</p>;<br>});<br>
useCallback	- 함수를 메모이제이션하여 동일한 함수 인스턴스를 유지.	jsx<br>const memoizedCallback = useCallback(() => {<br> doSomething();<br>}, [dependencies]);<br>
React.lazy	- 컴포넌트를 필요할 때만 로드하여 초기 렌더링 성능을 개선.	jsx<br>const LazyChild = React.lazy(() => import('./Child'));<br><Suspense fallback={<div>Loading...</div>}><LazyChild /></Suspense><br>
useMemo	- 계산된 값을 메모이제이션하여 불필요한 계산 방지.	jsx<br>const computedValue = useMemo(() => heavyComputation(input), [input]);<br>
shouldComponentUpdate (Class)	- 클래스 컴포넌트에서 렌더링 조건을 명시적으로 설정.	jsx<br>shouldComponentUpdate(nextProps, nextState) {<br> return nextProps.value !== this.props.value;<br>}<br>
PureComponent	- 클래스 컴포넌트에서 props와 state를 얕은 비교로 렌더링 여부를 결정.	jsx<br>class Child extends React.PureComponent {<br> render() {<br> return <p>{this.props.value}</p>;<br> }<br>}<br>
키 설정 (Key Prop)	- 리스트 렌더링 시 고유 키를 설정하여 불필요한 DOM 변경 방지.	jsx<br>items.map(item => (<div key={item.id}>{item.name}</div>))<br>
Code Splitting	- Webpack 등으로 코드 스플릿을 활용하여 필요할 때만 로드.	- React.lazy와 함께 사용하여 대규모 앱 최적화.

---

추천 조합

• React.memo와 useCallback: 자식 컴포넌트가 props와 콜백 함수로 주로 작동하는 경우 조합해서 사용.
• React.lazy와 Suspense: 대규모 컴포넌트를 동적으로 로드하여 초기 로드 시간을 줄임.

주의 사항

1. 과도한 최적화 지양: 렌더링에 큰 영향을 주지 않는 경우, 불필요한 최적화는 코드 복잡성을 증가시킬 수 있음.
2. 상태 관리와 의존성 확인: useCallback과 useMemo 사용 시 의존성 배열을 정확히 설정하지 않으면 버그 발생 가능.

---

후속 추천 질문

• [1] React.memo와 useCallback의 차이점은 무엇인가요?
• [2] React.lazy와 Suspense를 실제 프로젝트에서 활용하는 예는?
• [3] useMemo를 사용해야 하는 상황과 사용하지 않아도 되는 상황은?

번호를 입력하거나, 계속해서 대화를 이어가시면 됩니다.