[React] Optimization

Suyeon·2020년 9월 22일

React

목록 보기

4/26

Stateless Component

useMemo()
useCallback()
React.memo()

1️⃣ React.memo()

shouldComponentUpdate Hook 버전
Props로 전달된 객체에 대해서 얕은 비교를 수행함 (HOC)
동일한 Props로 자주 Component Rendering이 일어나는 경우 : 부모 Component로 부터 전달받은 값이 변하면 자식 component 또한 렌더링이 됨(자식의 경우 props값의 변화가 없음에도)

Stateful Component

useSelector

useSelector를 사용해서 리덕스 스토어의 상태를 조회 할 땐 만약 상태가 바뀌지 않았으면 리렌더링하지 않음.
밑의 예시와 같은 경우, 매번 렌더링 될 때마다 새로운 object { number, diff }를 만드는 것이기 때문에 상태가 바뀌었는지 바뀌지 않았는지 확인을 할 수 없어서 낭비 렌더링이 이루어지고 있음.

const { number, diff } = useSelector(state => ({
  number: state.counter.number,
  diff: state.counter.diff
}));

// Solution (1) 여러번 useSelector 사용하기
const number = useSelector(state => state.counter.number);
const diff = useSelector(state => state.counter.diff);

// Solution (2) redux의 "shallowEqual" 내장 함수 사용하기
  const { number, diff } = useSelector(
    state => ({
      number: state.counter.number,
      diff: state.counter.diff
    }),
    shallowEqual
  );

equalityFn란?
이전 값과 다음 값을 비교하여 true가 나오면 리렌더링을 하지 않고 false가 나오면 리렌더링을 합니다.
equalityFn?: (left: any, right: any) => boolean
shallowEqual란?
shallowEqual은 react-redux에 내장되어있는 함수로서, 객체 안의 가장 겉에 있는 값들을 모두 비교해줍니다.

// 가장 겉에 있는 값은 object.a, object.b, object.c 
// shallowEqual 에서는 해당 값들만 비교
const object = {
  a: {
    x: 3,
    y: 2,
    z: 1
  },
  b: 1,
  c: [{ id: 1 }]
}