useSelector 제대로 사용하기

만약 아래 두 코드의 차이점을 답 할 수 있다면 제대로 useSelector를 사용하고 있는 것이다.

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  const state = useSelector((state) => state);
  const name = state.User.name;
  const age = state.User.age;
  const address = state.User.address;
  // const number = state.User.number // User안에 number 값도 있음

  return (
    <div>
      {`회원인 ${name}씨의 나이는 ${age}세이고, ${address}에 거주한다.`}
    </div>
  );
};

export default App;

코드1

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  const name = useSelector((state) => state.User.name);
  const age = useSelector((state) => state.User.age);
  const address = useSelector((state) => state.User.address);
  // const number = useSelector((state)=> state.User.number); User안에 number 값도 있음

  return (
    <div>
      {`회원인 ${name}씨의 나이는 ${age}세이고, ${address}에 거주한다.`}
    </div>
  );
};

export default App;

코드2

코드 1과 2의 차이는 useSelector를 한 번 사용했지 여러번 사용했는지의 차이가 있다.

위 코드를 실행시키면 결과는 똑같이 출력된다.

그럼 어떠한 차이가 있을까?

최적화가 잘 된 코드는 코드2이다.

코드1의 경우 User라는 State에 number가 있다고 가정할 때, number가 바뀌어도 리랜더링 처리된다.

이유는 useSelector의 리턴값이 다를 경우 자동으로 리랜더링 처리를 한다.

만약 값이 같을 경우 리랜더링 처리를 하지 않는다.

따라서 useSelector의 리턴 값은 최대한 구체적인 값(이왕이면 원시값)을 리턴하도록 만드는 것이 리랜더링을 줄이는 방법이 된다.