렌더링 최적화

김준엽·2022년 6월 20일
0

React

목록 보기
10/11

React.memo()

React.memo는 컴포넌트를 메모리제이션하는 함수입니다. React.memo로 래핑된 컴포넌트의 이전 props를 비교하여 같다면 리렌더링하지 않고 마지막으로 렌더링된 결과를 재사용합니다. 같지 않다면 리렌더링됩니다.

function MyComponent(props){
  // props를 사용하여 렌더링
}
export default React.memo(MyComponent)

비교 함수를 정의해서 props를 비교가능합니다.

function MyComponent(props){
  // props를 사용하여 렌더링
}
const shallowCompare = (prevProps, nextProps) => {
  /*
  nextProp가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
  */
}
export default React.memo(MyComponent, shallowCompare)

언제 React.memo() 사용할까?

React.memo는 모든 컴포넌트에 사용해야 하는 건 지양해야 합니다. 메모리제이션하는 비용을 감수해야 하기 때문에 사용해야 할 때는 아래와 같습니다.

같은 props로 자주 렌더링되고 무겁고 큰 연산이 있는 컴포넌트에 적용하면 됩니다. 예를 들어 차트를 그리는 컴포넌트가 무겁고 큰 연산에 해당하는 컴포넌트인 것 같습니다.

useMemo, useCallback

useMemo와 useCallback은 메모리제이션하는 hook입니다. 차이점은 useMemo는 메모리제이션된 을 반환하고 useCallback은 메모리제이션된 함수를 반환합니다.

함수 컴포넌트는 렌더링될 때마다 내부에 선언된 변수, 함수 모두가 다시 선언되어 사용됩니다. 그런데 useMemo와 useCallback로 래핑된 것들은 deps에 따라 재생성 여부 결정하기 때문에 불필요한 렌더링을 줄일 수 있습니다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

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

//useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.

useMemo와 useCallback의 첫 번째 인자를 메모리제이션하고 두 번째 인자가 이전 값과 달라지면 첫 번째 인자를 재생성합니다. 두 번째 인자(deps)가 의존성 배열입니다.

언제 useMemo, useCallback을 사용할까?

이것도 React.memo와 마찬가지로 무조건 사용은 지양해야 합니다. 일반적인 함수와 값들을 기억하고 이전 값들을 비교하는 리소스를 생각해야 합니다. 그래서 저는 잘 사용하지 않습니다.

그러면 언제 사용해야 할까요? 참조 동일성을 유지해야 할 때와 메모리제이션할 만큼 무겁고 비싼 연산일 때 사용해야 합니다. 저는 참조 동일성을 유지하기 사용했습니다.

참고

profile
프론트엔드 개발자

0개의 댓글