React - useSelector를 활용한 리덕스 상태값 반환

useSelector는 리액트의 리덕스 스토어 관련 Hook중 하나이다. 이 Hook은 스토어의 상태값을 반환해주는 역할을 한다. useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우( 버튼 클릭 등의 이벤트를 통해 액션이 실행되어 상태값이 변경된 경우) 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다.

 

1. useSelector 사용을 위한 react-redux 설치

npm install react-redux
yarn add react-redux

useSelector를 사용하기 위해서는 react-redux를 설치해야 한다.

 

2. useSelector 형식

import { useSelector } from 'react-redux';

const fruitList = useSelector(state => state.fruit);
// useSelector의 사용법

useSelector를 사용하여 상태값을 가져오는 것은 간단하다. useSelector에 매개변수에 state => state.모듈명  형식으로 상태값을 반환할 수 있다. fruit 상태 안에 name, price 등의 요소를 바로 가져오고 싶을 경우, state => state.fruit.name   state => state.fruit.price 와 같이 요소요소들을 마침표로 구분하여 상태값을 가져올 수도 있다.

 

3. useSelector의 사용 예

// modules/fruit.js -  fruit이라는 기능을 가진 리듀서

// 액션
const SET_FRUIT_LIST = "fruit/SET_FRUIT_LIST";

// 액션 생성 함수
export const setFruitList = fruistList => ({ type : SET_FRUIT_LIST, fruitList });

// 초기값
const initialState = {
  name: false,
  price: false,
};

// 리덕스 스토어값 변경
export default function fruit(state = initialState, action) {
  switch(action.type) {
    case SET_FRUIT_LIST :
      return {
        ...state,
        name: action.fruitList,
      };
    default:
      return state;
  }
}

이전 게시글의 액션을 바탕으로, fruitList에 '딸기'라는 값이 들어간 상태로 setFruitList라는 액션이 실행되었다고 가정해보자.

setFruitList 액션으로 인해, fruit이라는 모듈의 name 상태에 '딸기'라는 값이 들어갔다.

 

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

dispatch(setFruitList('딸기')); // 액션 호출

console.log(fruit.name); // '딸기'
console.log(fruit.price); // false

그 후, useSelector로 fruit이라는 모듈의 상태값을 가져오도록 하고, dispatch를 통해 스토어 상태를 변경시키기 위해 액션을 호출한다. setFruitList 액션으로 인해 스토어의 상태값이 변경되었고, fruit.name을 콘솔에 찍어본 결과 '딸기'라는 값이 나오는 것을 확인할 수 있다. 또한, 값을 넣지 않은 fruit.price에는 초기값으로 설정된 false가 나오는 것을 확인할 수 있다.

만약 액션을 호출하지 않고, 리덕스 스토어 상태를 호출하여 상태값을 조회하는 경우, 두 상태의 초기값인 false가 콘솔에 찍히는 것을 확인할 수 있다.

 

4. useDispatch + useSelector 를 활용한 리덕스 스토어의 장점

 리덕스 스토어에 상태값을 관리하기 위해 값을 저장하고 useSelector를 통해 필요한 상태값을 반환하여 적절한 컴포넌트에 사용하여 불필요한 렌더링을 최소화 할 수 있으며, props를 사용할 때의, 복잡함을 단번에 해결할 수 있다.

 

---

-- 리덕스 스토어를 생성하는 방법 --

https://phsun102.tistory.com/83

React - Redux를 통한 상태관리

 

-- 리덕스 스토어의 상태값을 변경하는 방법 --

https://phsun102.tistory.com/84

React - useDispatch를 사용한 액션 실행