[Redux] 7. 리덕스 useSelector 최적화

🙏 이번 장의 목표

useSelector로 컴포넌트를 최적화하는 방법을 배운다.

컴포넌트 리렌더링 여부 확인하기

먼저, 컴포넌트의 리렌더링 여부를 확인하기 위해 리액트 개발자 도구를 설치한다.

👉 리액트 개발자 도구 설치하기

도구를 설치한 뒤 브라우저에서 개발자 도구를 실행하면 다음과 같이 리액트 탭이 생성된 것을 확인할 수 있다.

여기서 왼쪽에 있는 톱니바퀴 버튼을 누르면 다음과 같이 설정 창이 화면에 표시된다.

설정 창에서 Highlight updates~~~를 체크해주면~?!

컴포넌트가 리렌더링될때마다 테두리가 변경되는 것을 확인할 수 있다.

 

투두리스트 페이지 살펴보기

이전에 만들었던 투두리스트 페이지를 살펴보면서 컴포넌트 최적화 방법에 대해 알아보자

페이지에서 +, - 버튼을 눌러보면 할 일 목록은 리렌더링 되지 않는다. 

하지만 할 일 목록의 항목을 클릭해보면 다음과 같이 토글 될 때마다 카운터가 리렌더링 되는 것을 확인할 수 있다.

기본적으로, useSelector를 사용하게 되면 리덕스 스토어의 상태가 바뀌었을 때만 리렌더링 된다.

TodosContainer의 경우 todos 배열을 다음과 같이 useSelector로 감싸줬다.

const todos = useSelector(state => state.todos);

그렇기 때문에 +, - 버튼을 눌러서 카운터 값이 변경돼도 todos 값엔 변화가 없기 때문에 TodosContainer는 리렌더링 되지 않는다.

 

하지만 CounterContainer도 다음과 같이 useSelector를 적용했는데도 number와 diff가 변경되지 않아도 리렌더링이 발생한다. TodosContainer과의 차이점이 뭘까?

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

얼핏 보면 두 컴포넌트 간의 차이가 없는것 같지만

CounterContainer에서는 사실상 useSelector Hook을 통해 매번 렌더링 될 때마다 새로운 객체 { number, diff }가 생성되고 있다.

👉 상태가 바뀌었는지 바뀌지 않았는지 확인할 수 없어 렌더링이 계속 일어나개 된다.

 

이를 최적화하기 위해선 두가지 방법이 있다.

 

1. state별로 useSelector를 사용한다.

const number = useSelector(state => state.counter.number);
const diff = useSelector(state => state.counter.diff);

👉 number나 diff가 변경됐을 때만 컴포넌트가 리렌더링 된다

 

2. react-redux의 shallowEqual 함수를 useSelector의 두번째 인자로 전달한다.

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

원래 useSelector의 두번째 파라미터는 equalityFn이다.

❓ equalityFn는 이전 값과 다음 값을 비교해 결과값이 true이면 리렌더링 하지 않고 false가 나오면 리렌더링을 진행한다. 

그리고 shallowEqual는 react-redux에 내장돼있는 함수로 객체 안의 가장 겉에 있는 값들을 모두 비교해준다.

여기서 가장 겉에 있는 값의 의미가 무엇인지 궁금해질 것이다. 이에 대한 예시는 다음과 같다.

 

만일, 다음과 같은 객체가 있다면

const object = {
  a: {
    x: 3,
    y: 2,
    z: 1
  },
  b: 1,
  c: [{ id: 1 }]
}

 

가장 겉에 있는 값은 object.a, object.b, object.c이다.

shallowEqual는 해당 값들만 비교한다.

object.a 내에 있는 x, y, z나 object.c[0]는 비교 대상에 포함되지 않는다.

 

이와 같은 방법을 사용해서 최적화를 해주면 컴포넌트의 리렌더링을 최소화 할 수 있다.

 

참고

벨로퍼트와 함께하는 모던 리액트 https://react.vlpt.us/redux/08-optimize-useSelector.html