1. memo()사용

React.memo()는 HOC 이며 props가 바뀌지 않으면 리렌더하지 않는다.

2. props로 inline function 사용하지 않기

불필요한 리렌더링을 유발함.
컴포넌트가 리렌더할 때 그 하위 컴포넌트들도 모두 리렌더링 된다는 사실은 다들 알고있을것이다.
컴포넌트가 prop으로 새로운 함수를 받으면 매번 리렌더링이 발생한다. 그럼 props가 변한게 없더라도 하위 컴포넌트까지 덩달아 리렌더하게 된다.

// 리렌더링을 유발함. props에 inline function때문.
function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent onClick={() => setCount(count + 1)} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Increment Count</button>;
}

위의 리렌더링 유발요소를 제거하면 아래와 같음.

function ParentComponent() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <ChildComponent onClick={handleIncrement} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Increment Count</button>;
}

ParentComponent 내부에 handleIncrement() 함수를 정의하고, 이를 ChildComponent의 onClick prop으로 전달. 이렇게 함으로써 매번 동일한 함수 참조가 전달되어 불필요한 다시 렌더링을 방지할 수 있음.

3. 한 번에 너무 많은 컴포넌트를 렌더링하거나 중첩된 컴포넌트를 과도하게 사용하지 않기

가상 DOM에 추가되는 각 컴포넌트는 추가적인 처리 시간이 필요하므로, 많은 컴포넌트가 있는 경우 렌더링 과정이 느려질 수 있다.

예를 들어, 페이지에 렌더링하려는 긴 목록이 있다고 가정해 보면

모든 항목을 한꺼번에 렌더링하는 대신, 페이지네이션이나 무한 스크롤링과 같은 기법을 사용하여 한 번에 작은 부분집합의 항목을 렌더링할 수 있음.

이렇게 하면 렌더링해야 할 컴포넌트 수가 줄어들어 성능이 크게 향상될 수 있음.

마찬가지로, 컴포넌트의 중첩이 과도한 경우에도 렌더링 시간이 느려질 수 있음. 각 중첩 수준마다 추가적인 처리 시간이 필요하며, 코드의 디버깅과 유지보수가 어려워질 수 있음.

불필요한 리렌더링, 상태의 적절하지 않은 사용, 그리고 과도한 제3자 라이브러리 사용과 같은 실수를 피함으로써 개발자는 애플리케이션의 성능을 최적화하고 매끄러운 사용자 경험을 제공할 수 있다.

또한, 컴포넌트 계층을 간단하게 유지하고 코드 분할, 페이지네이션과 같은 기법을 사용하여 렌더링해야 할 컴포넌트 수를 줄일 수 있으므로, 더 빠른 렌더링 시간을 얻을 수 있다.