컴포넌트 성능 최적화 기법

React 애플리케이션을 개발하면서 성능 최적화는 매우 중요한 부분입니다. 사용자 경험을 개선하고 애플리케이션의 반응성을 높이기 위해 컴포넌트 성능 최적화 기법을 알아보겠습니다.

불필요한 렌더링 방지

React에서는 상태(State)나 속성(Props)이 변경될 때마다 컴포넌트가 다시 렌더링됩니다. 하지만, 모든 렌더링이 필요한 것은 아니므로 불필요한 렌더링을 방지하는 것이 중요합니다.

`React.memo` 사용하기

React.memo는 함수형 컴포넌트에서 props가 변경되지 않으면 컴포넌트를 다시 렌더링하지 않도록 합니다.

import React from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('렌더링!');
  return <div>{name}</div>;
});

// App 컴포넌트
const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <MyComponent name="React" />
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

export default App;

위 예시에서 MyComponent는 name props가 변경되지 않는 한 다시 렌더링되지 않습니다.

`useMemo`와 `useCallback` 사용하기

useMemo와 useCallback 훅은 값이나 함수를 메모이제이션하여 불필요한 연산과 렌더링을 줄여줍니다.

`useMemo`로 값 메모이제이션하기

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ number }) => {
  const computeExpensiveValue = (num) => {
    console.log('복잡한 계산 중...');
    return num * 2;
  };

  const expensiveValue = useMemo(() => computeExpensiveValue(number), [number]);

  return <div>{expensiveValue}</div>;
};

const App = () => {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(1);

  return (
    <div>
      <ExpensiveComponent number={number} />
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <button onClick={() => setNumber(number + 1)}>넘버 증가</button>
    </div>
  );
};

export default App;

useMemo는 number가 변경될 때만 computeExpensiveValue 함수를 실행합니다.

`useCallback`으로 함수 메모이제이션하기

import React, { useState, useCallback } from 'react';

const MyButton = React.memo(({ onClick, children }) => {
  console.log('버튼 렌더링');
  return <button onClick={onClick}>{children}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('클릭');
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <MyButton onClick={handleClick}>클릭</MyButton>
      <p>{count}</p>
    </div>
  );
};

export default App;

useCallback은 handleClick 함수가 참조 동일성을 유지하도록 하여, MyButton이 불필요하게 렌더링되지 않도록 합니다.

`React.lazy`와 `Suspense`를 이용한 코드 분할

큰 애플리케이션은 초기 로딩 속도를 최적화하기 위해 코드 분할이 필요합니다. React.lazy와 Suspense를 사용하여 동적으로 컴포넌트를 로드할 수 있습니다.

import React, { Suspense } from 'react';

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

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
};

export default App;

위 예시에서 OtherComponent는 필요할 때만 로드되므로 초기 로딩 시간을 줄일 수 있습니다.

더 알아보기

React.memo: 컴포넌트의 불필요한 렌더링을 방지하는 방법
useMemo: 값의 메모이제이션을 통한 성능 최적화
useCallback: 함수의 메모이제이션을 통한 성능 최적화
React.lazy와 Suspense: 코드 분할을 통해 초기 로딩 속도를 최적화하는 방법

내용 요약

컴포넌트 성능 최적화는 불필요한 렌더링을 방지하고, 값과 함수를 메모이제이션하여 성능을 높이는 것을 목표로 합니다. React.memo, useMemo, useCallback과 같은 도구들을 사용하면 효과적으로 애플리케이션의 성능을 개선할 수 있습니다. 또한, React.lazy와 Suspense를 이용한 코드 분할을 통해 초기 로딩 시간을 줄이는 것도 중요한 기법입니다.

불필요한 렌더링 방지​

React.memo 사용하기​

useMemo와 useCallback 사용하기​

useMemo로 값 메모이제이션하기​

useCallback으로 함수 메모이제이션하기​

React.lazy와 Suspense를 이용한 코드 분할​

더 알아보기​

내용 요약​