React.memo

• 목적: React.memo는 함수형 컴포넌트의 렌더를 최적화하기 위한 하이어오더 컴포넌트(HOC)로, 클래스 컴포넌트용 PureComponent와 유사하지만 함수형 컴포넌트에 특화되어 있습니다.

• 작동 원리: 함수형 컴포넌트가 React.memo로 래핑되면 해당 컴포넌트에 전달된 props를 확인합니다. 만약 렌더 간에 props가 변경되지 않았다면(즉, 얕은 비교 결과 props가 동일하다면), 컴포넌트는 다시 렌더링되지 않고 이전에 렌더링된 출력을 사용합니다(캐싱).

• 사용 예: 컴포넌트의 props가 동일한 경우 불필요한 재렌더링을 방지하려면 유용합니다. 복잡한 컴포넌트나 정적 props를 받는 컴포넌트와 함께 성능을 최적화하는 데 적합합니다.

• 예제:

1
2
3
const MyComponent = React.memo(({ prop1, prop2 }) => {
  // 컴포넌트 로직
});

useCallBack

• 목적: useCallback은 함수를 메모이제이션하여 렌더링할 때마다 재생성되는 것을 방지하기 위한 React 훅입니다.

• 작동 원리: useCallback로 함수를 래핑하면 함수 인스턴스가 메모이제이션되어 종속성이 변경되지 않는 한 렌더링할 때마다 새로 생성되지 않습니다. 종속성이 변경되면 새로운 콜백 인스턴스가 만들어지고, 그렇지 않으면 이전에 메모이제이션된 인스턴스를 반환합니다.

• 사용 예: 자식 컴포넌트에 콜백을 전달하여 함수 참조의 변경으로 인한 불필요한 재렌더링을 방지할 때 유용합니다. 콜백이 사용되는 자식 컴포넌트에서 불필요한 재렌더링을 줄이기 위해 사용됩니다.

• 예제:

1
2
3
4
5
6
7
const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log("버튼 클릭됨!");
  }, []); // 종속성 배열이 비어 있으면 콜백은 어떤 변수에도 의존하지 않음

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

---

차이점

• React.memo는 주로 전체 함수형 컴포넌트를 메모이제이션하는 데 중점을 둔 반면, useCallback은 종속성을 사용하여 재생성을 피하려는 특정 함수를 메모이제이션합니다.

• 최적의 방법은 콜백 함수가 자식 컴포넌트로 전달되는 경우입니다. 먼저 useCallback을 사용하여 콜백을 메모이제이션하고, 그 다음에 React.memo로 자식 컴포넌트를 래핑하여 불필요한 재렌더링을 방지합니다.

• React.memo는 주로 컴포넌트 수준의 최적화에 중점을 둬야 하고, useCallback은 함수 수준의 최적화에 사용됩니다.

적용

업무 중 랜더링 최적화 관련하여 작업 진행하였습니다. echart를 사용 중 select문을 수정하면 조회 버튼을 누르기 전 echart가 리랜더링 되며 함수가 실행되버리는 현상이 발생하였습니다. 해결책으로는 useCallBack과 React.memo를 사용하는 것 입니다. 부모 컴포넌트에 React.memo를 걸어 props를 얕은 비교를 통하여 같다면 랜더링을 방지하는 것을 1번째 방법으로 뒀고, 추가적으로 useCallBack을 사용하여 echart에서 리랜더링 시 실행되는 함수에 사용하여 같은 값을 리턴할때, 함수 재생성 및 재실행 상황을 방지하여 해결하였습니다.