[React] React 함수형 최적화 하기

React는 매우 빠른 렌더링 성능을 자랑하지만, 큰 규모의 애플리케이션에서는 여전히 성능 문제가 발생할 수 있습니다. 이를 해결하기 위해 함수형 컴포넌트를 사용할 수 있지만, 함수형 컴포넌트 역시 최적화 작업이 필요합니다.

다음은 React 함수형 컴포넌트 최적화를 위한 몇 가지 팁입니다.

1. React.memo 사용하기

React.memo는 컴포넌트의 props가 변경되지 않으면 이전 렌더링 결과를 재사용하여 렌더링 성능을 향상시키는 함수입니다. 함수형 컴포넌트에서는 React.memo를 사용하여 props가 변경되지 않는 경우, 불필요한 렌더링을 방지할 수 있습니다.

import React from 'react';

const MyComponent = React.memo(({prop1, prop2}) => {
  return (
    <div>
      {prop1}
      {prop2}
    </div>
  )
});

2. useCallback 사용하기

useCallback은 함수형 컴포넌트에서 함수를 캐싱하는 훅입니다. 이를 사용하여 불필요한 함수 생성을 방지하고 성능을 향상시킬 수 있습니다.

import React, { useCallback } from 'react';

const MyComponent = ({onClick}) => {
  const handleClick = useCallback(() => {
    onClick("clicked!");
  }, [onClick]);

  return (
    <button onClick={handleClick}>Click me!</button>
  )
};

3. useMemo 사용하기

useMemo는 함수형 컴포넌트에서 값을 캐싱하는 훅입니다. 이를 사용하여 불필요한 계산을 방지하고 성능을 향상시킬 수 있습니다.

import React, { useMemo } from 'react';

const MyComponent = ({value1, value2}) => {
  const result = useMemo(() => {
    return value1 + value2;
  }, [value1, value2]);

  return (
    <div>{result}</div>
  )
};

4. 불필요한 렌더링 방지하기

함수형 컴포넌트에서는 불필요한 렌더링을 방지하기 위해 다음과 같은 사항을 고려해야 합니다.

• props나 state가 변경되지 않는 경우 렌더링을 방지하기 위해 React.memo를 사용합니다.
• 함수나 객체를 props로 전달하지 않습니다.
• 인라인 함수를 사용하지 않습니다.

5. 렌더링 최적화

함수형 컴포넌트에서 렌더링 성능을 향상시키기 위해 다음과 같은 사항을 고려해야 합니다.

• 불필요한 DOM 조작을 최소화합니다.
• 큰 배열을 렌더링할 때는 React.memo나 shouldComponentUpdate를 사용합니다.
• 필요한 경우, 상위 컴포넌트에서 상태를 관리하고 하위 컴포넌트에 props로 전달합니다.

이러한 팁을 적용하여 React 함수형 컴포넌트의 성능을 최적화할 수 있습니다.