리액트에서 성능 최적화

리액트에서 성능 최적화를 위해 여러 가지 방법을 사용할 수 있다. 대표적으로 메모이제이션이 있다. 리액트의 memo를 사용하여 컴포넌트를 메모이제이션할 수 있다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화한다. 특히 렌더링 비용이 큰 컴포넌트에서 유용하다.
또한 useCallback과 useMemo를 활용할 수도 있다. useCallback은 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하고, useMemo는 값의 재계산을 방지하여 성능을 최적화한다. 이를 통해 자식 컴포넌트로 전달되는 함수나 값이 변경되지 않으면 리렌더링을 피할 수 있다.
마지막으로 코드 스플리팅을 활용해볼 수 있다. 코드 스플리팅은 큰 애플리케이션을 여러 개의 작은 청크로 나누어, 필요한 청크만 로드하게 하여 초기 로드 시간을 줄인다. React.lazy와 Suspense를 사용하여 동적으로 컴포넌트를 로드할 수 있다.

코드 스플리팅은 어떤 경우에 사용?

첫번째로는 초기 로딩 시간이 길어지는 경우이다. 애플리케이션이 커지면, 초기 로딩에 모든 코드를 로드하는 것이 비효율적일 수 있다. 코드 스플리팅을 사용해 초기 로드 시 필요한 핵심 코드만 로드하고, 이후 추가적인 기능은 필요할 때 로드하도록 하면 초기 로딩 속도를 크게 개선할 수 있다.
두번째로는 라우트별 코드 분할이 필요한 경우이다. SPA에서는 각 페이지가 별도의 기능과 UI를 가지므로, 라우트별로 필요한 코드만 분리하여 로드할 수 있다. 이 방식은 React.lazy와 Suspense를 사용하여 라우트별 컴포넌트를 동적으로 불러올 때 유용하다.