State를 이동하여 리렌더링 최적화

Source: Dev.to

소개

성능을 향상하고 불필요한 재렌더링을 줄이는 한 가지 방법은 상태를 낮은 수준으로 옮기는 것입니다. 특히 해당 상태가 컴포넌트 트리의 특정 부분에만 영향을 미치는 경우에 유용합니다.

예를 들어, count 상태를 변경하는 버튼을 가진 부모 컴포넌트를 생각해 보세요. 이 상태 변경을 별도의 컴포넌트로 이동하면 전체 부모가 재렌더링되는 것을 방지할 수 있습니다.

문제 발생 전 (성능 이슈가 있는 경우)

import { useState } from 'react';
import { data } from '../../../../data';
import List from './List';

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

  return (
    
       setCount(count + 1)}
        style={{ marginBottom: '1rem' }}
      >
        count {count}
      
      
    
  );
};
export default App;

이 구성에서는 count 상태가 변경될 때마다 전체 App 컴포넌트(그리고 List 컴포넌트 포함)가 재렌더링되어 비효율적입니다.

해결책: 카운터 버튼을 별도 Counter 컴포넌트로 이동

import { useState } from 'react';
import { data } from '../../../../data';
import List from './List';
import Counter from './Counter';

const App = () => {
  const [people, setPeople] = useState(data);

  return (
    
      
      
    
  );
};
export default App;

카운터 버튼을 자체 Counter 컴포넌트로 추출하면, 카운트가 변할 때 해당 컴포넌트만 재렌더링되고 나머지 UI는 영향을 받지 않습니다.

업데이트된 Counter 컴포넌트

import { useState } from 'react';

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

  return (
     setCount(count + 1)}
      style={{ marginBottom: '1rem' }}
    >
      count {count}
    
  );
};

export default Counter;

React Profiler

React Profiler에서는 버튼을 클릭했을 때 Counter 컴포넌트만 재렌더링되고, List 컴포넌트나 그 자식 컴포넌트(예: Person)는 재렌더링되지 않는 것을 확인할 수 있습니다.

Profiler 스크린샷

요약

특정 UI 요소(예: 카운터 버튼)에만 영향을 주는 상태를 별도 컴포넌트로 분리하면 불필요한 재렌더링을 줄이고 성능을 향상시킬 수 있습니다.