불필요한 리렌더링 이해와 방지
React 애플리케이션의 성능을 최적화하는 데 있어 불필요한 리렌더링을 이해하고 방지하는 것은 매우 중요합니다.
이 절에서는 리렌더링의 원인과 이를 최적화하는 방법에 대해 알아보겠습니다.
컴포넌트 리렌더링의 조건
React 컴포넌트가 리렌더링되는 주요 조건은 다음과 같습니다.
- 컴포넌트의 상태(state)가 변경될 때
- 부모 컴포넌트가 리렌더링될 때
- 컴포넌트에 전달되는 props가 변경될 때
예를 들어,
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
} 이 예제에서 setCount가 호출될 때마다 Counter 컴포넌트가 리렌더링됩니다.
부모 컴포넌트 리렌더링의 영향
부모 컴포넌트가 리렌더링되면, 기본적으로 모든 자식 컴포넌트도 리렌더링됩니다.
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child />
</div>
);
}
function Child() {
console.log('Child rendered');
return <div>Child</div>;
} 이 경우, Parent의 count 상태가 변경될 때마다 Child 컴포넌트도 리렌더링됩니다.
Props 변경에 따른 리렌더링
Props가 변경되면 해당 컴포넌트는 리렌더링됩니다.
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<Child count={count} />
</div>
);
}
function Child({ count }) {
return <div>Count in Child: {count}</div>;
} count prop이 변경될 때마다 Child 컴포넌트가 리렌더링됩니다.
React.memo를 사용한 최적화
React.memo는 고차 컴포넌트(HOC)로, props가 변경되지 않으면 컴포넌트의 리렌더링을 방지합니다.
const MemoizedChild = React.memo(function Child({ name }) {
console.log('Child rendered');
return <div>{name}</div>;
});
function Parent() {
const [count, setCount] = useState(0);
const [name] = useState('John');
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<MemoizedChild name={name} />
</div>
);
} 이 경우, count가 변경되어도 MemoizedChild는 리렌더링되지 않습니다.
useCallback 사용법
useCallback은 함수를 메모이제이션하여, 불필요한 리렌더링을 방지합니다.
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []); // 의존성 배열이 비어있으므로 함수는 한 번만 생성됩니다.
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<MemoizedChild onButtonClick={handleClick} />
</div>
);
}
const MemoizedChild = React.memo(function Child({ onButtonClick }) {
console.log('Child rendered');
return <button onClick={onButtonClick}>Click me</button>;
}); handleClick 함수가 메모이제이션되어 MemoizedChild의 불필요한 리렌더링을 방지합니다.
useMemo 사용법
useMemo는 계산 비용이 큰 값을 메모이제이션합니다.
function ExpensiveComponent({ data }) {
const expensiveResult = useMemo(() => {
return data.reduce((acc, item) => acc + item, 0);
}, [data]); // data가 변경될 때만 재계산합니다.
return <div>Result: {expensiveResult}</div>;
} data가 변경되지 않으면 expensiveResult는 재계산되지 않습니다.
리렌더링 최적화 전략
- 상태를 적절한 레벨에 위치시키기
- 불변성 유지하기
- 리스트 렌더링 시 적절한 key 사용하기
- 대규모 리스트는 가상화 기법 사용하기 (예 : react-window)
- 이벤트 핸들러를 인라인으로 정의하지 않기
- Context API 사용 시 Provider 최적화하기
불필요한 최적화의 위험성
과도한 최적화는 코드의 복잡성을 증가시키고 가독성을 해칠 수 있습니다.
따라서 다음 경우에만 최적화를 고려하세요.
- 성능 문제가 실제로 발생했을 때
- 컴포넌트가 자주 리렌더링될 때
- 컴포넌트의 리렌더링 비용이 클 때
적절한 사용 시기에 대한 가이드라인
- 프로파일링을 통해 실제 성능 병목지점 식별하기
- 사용자 경험에 직접적인 영향을 미치는 부분부터 최적화하기
- 데이터 흐름과 상태 관리 구조를 먼저 개선하기
- 최적화 전후의 성능을 측정하고 비교하기
불필요한 리렌더링을 방지하는 것은 React 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 그러나 모든 컴포넌트를 무조건적으로 최적화하는 것은 바람직하지 않습니다. 성능 최적화는 항상 측정 가능한 문제에 대한 해결책으로 접근해야 합니다.
React의 기본적인 렌더링 메커니즘은 이미 꽤 효율적이므로, 대부분의 경우 추가적인 최적화 없이도 충분한 성능을 발휘합니다. 따라서 실제 성능 문제가 발생했을 때, 그리고 그 원인이 불필요한 리렌더링임이 확인되었을 때 최적화 기법을 적용하는 것이 좋습니다.
마지막으로, 최적화 기법을 적용할 때는 항상 코드의 가독성과 유지보수성을 고려해야 합니다. 때로는 약간의 성능 저하를 감수하고 코드를 더 명확하고 이해하기 쉽게 유지하는 것이 장기적으로 더 유리할 수 있습니다. 팀의 다른 개발자들과 최적화 전략에 대해 논의하고 합의하는 것도 중요한 과정입니다.