면접에서 자주 묻는 React 성능 최적화 기법 분석/비교

정현우·2024년 9월 27일

React 애플리케이션의 성능 최적화는 사용자 경험에 직접적인 영향을 미치는 중요한 요소다. 면접에서 자주 등장하는 질문들을 기준으로 각 최적화 기법을 분석하고, 실무에서 어떻게 적용할 수 있는지 비교해 보자.

React.memo: 컴포넌트의 리렌더링을 방지하는 고차 컴포넌트(HOC)로, props가 변하지 않으면 컴포넌트를 다시 렌더링하지 않는다. 하지만 props가 객체나 함수를 포함할 경우 레퍼런스가 매번 새로 생성되므로 useMemo나 useCallback과 같이 메모이제이션 기법을 활용해야 효과적이다.
- 장점: 간단하게 리렌더링을 제어할 수 있으며, 성능 최적화에 효과적이다.
- 단점: 지나친 사용은 오히려 성능 저하를 일으킬 수 있다. 적절한 props 관리를 요구한다.
useMemo: 연산량이 큰 작업의 결과를 메모이제이션해, 특정 값이 변경될 때만 다시 계산하도록 한다. 주로 리턴 값이 객체나 배열일 때 많이 사용된다.
- 장점: 계산이 복잡한 값의 불필요한 재계산을 방지한다.
- 단점: 작은 최적화를 위해 너무 자주 사용하면 성능 이득이 미미할 수 있다.
useCallback: 함수의 메모이제이션을 위해 사용되며, 자식 컴포넌트로 함수를 props로 전달할 때 유용하다.
- 장점: 자식 컴포넌트의 불필요한 리렌더링을 막아 성능 최적화가 가능하다.
- 단점: 사용하지 않아도 되는 경우에 남용할 경우 코드 가독성이 떨어질 수 있다.

컴포넌트 상태 최소화: 불필요한 상태가 많으면 컴포넌트가 자주 리렌더링된다. 상태는 가능하면 컴포넌트 내부에 두지 않고 상위 컴포넌트나 전역 상태로 관리하는 것이 좋다.
shouldComponentUpdate: 클래스 컴포넌트에서 리렌더링 여부를 결정하는 메서드로, props나 state가 변경될 때마다 호출된다. PureComponent로 대체 가능하며, 내부적으로 얕은 비교를 한다.
- 장점: props와 state 변화를 제어해 성능을 개선한다.
- 단점: 복잡한 조건이 많을 경우 메서드 유지보수가 어려울 수 있다.

필요성: 대규모 애플리케이션에서 모든 코드를 한 번에 로드하면 초기 로딩 속도가 느려진다. 이를 해결하기 위해 필요한 부분만 로드하는 방식이다.
방법: React의 React.lazy와 Suspense를 활용해 페이지나 특정 컴포넌트를 동적으로 로드한다.
```
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}
```
- 장점: 초기 로딩 시간을 줄이고, 필요한 시점에만 자원을 로드해 사용자 경험을 개선한다.
- 단점: 너무 많은 코드 스플리팅은 오히려 네트워크 요청이 많아져 성능 저하를 일으킬 수 있다. 적절한 스플리팅이 중요하다.

React.memo는 컴포넌트 리렌더링을 제어하는 가장 기본적인 방법이지만, props로 객체나 함수를 전달할 때는 useMemo나 useCallback을 함께 사용해야 효과적이다.
코드 스플리팅은 대규모 애플리케이션에서 필수적이지만, 지나친 스플리팅은 네트워크 요청 증가로 이어질 수 있어 적절한 밸런스가 필요하다.
SSR은 SEO나 초기 렌더링 성능에서 큰 장점을 제공하지만, 클라이언트 측 코드와의 복잡한 상호작용 때문에 적절한 상황에서만 사용하는 것이 좋다.