프로젝트 리팩토링하기 전에 간단하게 정리해 보았다.

✅React.memo

리액트를 사용해 개발을 할 때 여러개의 컴포넌트로 나누어 개발한다. 하지만 컴포넌트가 많아지면 렌더링 시 렌더링해야할 컴포넌트가 많아질 수 있다.

React.memo() 사용하면 이를 개선할 수 있다. 컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는 컴포넌트 렌더링하고 그 결과를 메모이징한다. 그리고 다음 렌더링 시 렌더링하는 컴포넌트의 props가 같아면 메모이징한 컴포넌트를 재사용한다.

사용법

const Component = React.memo(({ propA, propB }) => {
  // 컴포넌트 렌더링 로직
});

단점

단점으로 실제로 사용해야할 경우가 별로 없다는 것이다. 왜냐하면 props가 다른 경우가 더 많기 때문이다. props가 계속 바뀐다면 굳이 React.memo를 사용해 이전 props와 새로운 props를 비교하는 과정을 추가할 필요가 없다.

✅useMemo

함수의 호출 결과를 저장하고 동일한 입력이 발생하면 캐시된 결과를 반환해준다.

사용법

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

✅useCallback

컴포넌트가 렌더링 되면 그 안에 있는 함수도 다시 만들게 된다. 만약 함수를 자식 컴포넌트의 props로 내려주게 된다면, 매번 새로운 함수를 만들어 매번 새로운 props를 내려주게 되므로 자식 컴포넌트도 리렌더링을 하게 된다.

useCallback을 사용하면 이를 개선 할 수 있다. useCallback은 의존성 배열에 추가한 state나 props가 변하지 않는다면 새로 함수를 생성하지 않고 이미 생성된 함수의 참조값을 사용한다.

사용법

const memoizedCallback = useCallback(() => {
  // 함수 로직
}, [dependency]);

✅정리

React.memo는 컴포넌트를 useMemo는 함수의 값을 useCallback은 함수를 저장하여 재사용하므로써 반복되는 연산을 줄여준다.