매일메일 "리액트에서 성능 최적화를 위해 적용할 수 있는 방법들을 설명해주세요."

📝 메모이제이션

1. 리액트의 memo를 사용해서 컴포넌트를 메모이제이션할 수 있다.
   memo는 컴포넌트의 props가 변경되지 않았을 때 리렌더링을 방지해서 성능을 최적화한다.

memo

const MyComponent = React.memo(function MyComponent({ value }) {
  console.log("렌더링 됨");
  return <div>{value}</div>;
});

2. useCallback과 useMemo를 활용할 수 있다.
   useCallback : 함수를 메모이제이션해서 불필요한 함수 재생성을 방지한다.
   useMemo : 값의 재계산을 방지해서 성능을 최적화한다.
   ➡️ 자식 컴포넌트로 전달되는 함수나 값이 변경되지 않으면 리렌더링을 피할 수 있다.

useCallback

import { useCallback } from 'react';

function Parent() {
  const handleClick = useCallback(() => {
    console.log("클릭!");
  }, []); // [] 안의 값이 안 바뀌면 함수도 안 바뀜

  return <Child onClick={handleClick} />;
}

useMemo

import { useMemo } from 'react';

function MyComponent({ list }) {
  const expensiveResult = useMemo(() => {
    console.log("계산 다시 함");
    return list.filter(item => item.active);
  }, [list]); // list가 바뀔 때만 다시 계산됨

  return <div>{expensiveResult.length}</div>;
}

3. 코드 스플리팅
   코드 스플리팅은 큰 애플리케이션을 여러 개의 작은 청크로 나눠서 필요한 청크만 로드하게 해서 초기 로드 시간을 단축한다.
   코드 스플리팅은 한 번에 모든 코드를 불러오는 게 아니라 필요할 때만 해당 코드를 로딩하는 기법이다.
   React.lazy와 Suspense를 사용해서 동적으로 컴포넌트를 로드할 수 있다.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <MyComponent />
    </Suspense>
  );
}

React.lazy() : 컴포넌트를 동적으로 import
Suspense : 로딩되는 동안 보여줄 대체 UI 지정
fallback={<div>로딩 중</div>} : 로딩 중 잠깐 보여줄 내용

그럼 언제 사용할까? 🤔

1. 초기 로딩 시간이 길어지는 경우
   초기 로드 시 필요한 핵심 코드만 로드하고 이후에 필요할 때 로드하도록 설정

2. 라우트별 코드 분할이 필요한 경우
   SPA에서는 각 페이지가 별도의 기능과 UI를 가지기 때문에 라우트별로 필요한 코드만 분리해서 로드할 수 있다. 리액트의 React.lazy와 Suspense를 사용해서 라우트별 컴포넌트를 동적으로 불러올 때 유용하다.