리액트에서 성능 최적화(+ SPA, React.lazy, Suspense)

 

리액트에서는 성능 최적화를 위해 여러 가지 방법을 사용할 수 있습니다. 이번 글에서는 몇 가지 예시를 들어보도록 하겠습니다.

 

메모이제이션

 

리액트의 memo를 사용하여 컴포넌트를 메모이제이션할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화합니다. 이는 특히 렌더링 비용이 큰 컴포넌트에서 유용합니다.

 

또한 useCallback과 useMemo를 활용할 수도 있습니다. useCallback은 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하고, useMemo는 값의 재계산을 방지하여 성능을 최적화합니다. 이를 통해 자식 컴포넌트로 전달되는 함수나 값이 변경되지 않으면 리렌더링을 피할 수 있습니다.

 

마지막으로 코드 스플리팅을 활용해볼 수 있습니다. 코드 스플리팅은 큰 애플리케이션을 여러 개의 작은 청크로 나누어, 필요한 청크만 로드하게 하여 초기 로드 시간을 줄입니다. React.lazy와 Suspense를 사용하여 동적으로 컴포넌트를 로드할 수 있습니다.

 

코드 스플리팅을 사용해야 하는 경우

 

첫번째로는 초기 로딩 시간이 길어지는 경우입니다. 애플리케이션이 커지면, 초기 로딩에 모든 코드를 로드하는 것이 비효율적일 수 있습니다. 코드 스플리팅을 사용해 초기 로드 시 필요한 핵심 코드만 로드하고, 이후 추가적인 기능은 필요할 때 로드하도록 하면 초기 로딩 속도를 크게 개선할 수 있습니다.

두번째로는 라우트별 코드 분할이 필요한 경우입니다. SPA에서는 각 페이지가 별도의 기능과 UI를 가지므로, 라우트별로 필요한 코드만 분리하여 로드할 수 있습니다. 이 방식은 리액트의 React.lazy와 Suspense를 사용하여 라우트별 컴포넌트를 동적으로 불러올 때 유용합니다.

 

+ 추가 개념

SPA(단일 페이지 애플리케이션)

 

SPA(Single-Page Application)는 단일 웹 페이지 하나만 로드한 후, 사용자의 상호작용에 따라 필요한 데이터만 JavaScript API(Fetch/XMLHttpRequest)로 받아 화면의 일부만 동적으로 갱신하는 웹 애플리케이션 방식입니다.

 

React.lazy

React.lazy는 컴포넌트를 동적으로 가져와 초기 번들 크기를 줄이고, 필요한 시점에 컴포넌트를 로드하여 웹 애플리케이션의 성능을 최적화하는 내장 함수입니다. 주로 React.Suspense와 함께 사용하여 컴포넌트 로딩 중에 대기 화면을 표시하는 방식(코드 스플리팅)으로 사용됩니다. 

 

React.Suspense

React.Suspense는 컴포넌트의 렌더링을 일시 중지하고, 데이터 로딩이나 코드 스플리팅과 같은 비동기 작업이 완료될 때까지 로딩 화면을 보여주는 리액트 기능입니다. 비동기 처리를 선언적으로 관리하여 UI 상태 처리를 단순화하고 사용자 경험을 향상시킵니다. 

 

출처 - 매일메일