리액트에서 성능 최적화를 위해 적용할 수 있는 방법들을 설명해주세요.
리액트에서 성능 최적화를 위해 여러 가지 방법을 사용할 수 있는데요. 대표적으로 메모이제이션을 말씀 드릴 수 있겠습니다.
리액트의 memo를 사용하여 컴포넌트를 메모이제이션할 수 있습니다.
이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화합니다.
이는 특히 렌더링 비용이 큰 컴포넌트에서 유용합니다.
또한 useCallback과 useMemo를 활용할 수도 있습니다.
useCallback 은 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하고, useMemo는 값의 재계산을 방지하여 성능을 최적화합니다.
이를 통해 자식 컴포넌트로 전달되는 함수나 값이 변경되지 않으면 리렌더링을 피할 수 있습니다.
마지막으로 코드 스플리팅을 활용해볼 수 있습니다.
코드 스플리팅은 큰 애플리케이션을 여러 개의 작은 청크로 나누어, 필요한 청크만 로드하게 하여 초기 로드 시간을 줄입니다.
React.lazy와 Suspense를 사용하여 동적으로 컴포넌트를 로드할 수 있습니다.
코드 스플리팅은 어떤 경우에 사용해야 할까요? 🤔
첫번째로는 초기 로딩 시간이 길어지는 경우입니다. 애플리케이션이 커지면, 초기 로딩에 모든 코드를 로드하는 것이 비효율적일 수 있습니다. 코드 스플리팅을 사용해 초기 로드 시 필요한 핵심 코드만 로드하고, 이후 추가적인 기능은 필요할 때 로드하도록 하면 초기 로딩 속도를 크게 개선할 수 있습니다.
두번째로는 라우트별 코드 분할이 필요한 경우입니다. SPA에서는 각 페이지가 별도의 기능과 UI를 가지므로, 라우트별로 필요한 코드만 분리하여 로드할 수 있습니다. 이 방식은 리액트의 React.lazy와 Suspense를 사용하여 라우트별 컴포넌트를 동적으로 불러올 때 유용합니다.