useSelector 제대로 사용하기

Seongkyun Yu·2020년 12월 14일
12

TIL - React

목록 보기
4/4
post-thumbnail

만약 아래 두 코드의 차이점을 답 할 수 있다면 제대로 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의 리턴 값은 최대한 구체적인 값(이왕이면 원시값)을 리턴하도록 만드는 것이 리랜더링을 줄이는 방법이 된다.

profile
FrontEnd Developer

4개의 댓글

comment-user-thumbnail
2021년 12월 3일

지금 보니 당연하다고 생각되지만 코드를 보기 전에는 이런 생각을 못했네요! 좋은 글 감사합니다 ㅎㅎ

2개의 답글
comment-user-thumbnail
2022년 4월 18일

개념이 헷갈렸는데 단번에 이해했습니다 ㅎㅎ 감사합니다

답글 달기