모듈생성,스토어연결,useSelector[숙련

내일배움캠프[4기_Reac트랙]/[원격]React_숙련

모듈생성,스토어연결,useSelector[숙련_3]

ecoEarth 2022. 12. 18. 15:31

모듈 만들기

(1) 우리가 리덕스로 만들 첫 프로그램은?

우리가 리덕스로 처음 만들어 볼 것은 예전에 만들었던 카운터 프로그램 입니다. useState 로 만들었던 것을 리덕스로 다시 만들어봅시다.

(2) 첫 모듈 만들기

모듈이란, State의 그룹이라고 했습니다. 우리의 첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 될 것 입니다. 아래 순서대로 파일을 생성하고 코드를 입력해볼까요?

modules 폴더에 counter.js 파일을 생성한다.
코드를 작성한다.

src/modules/counter.js <- 얘가 모듈(module)임

// 초기 상태값
const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

모듈의 구성요소 살펴보기

(1) initialState === 초기 상태값

// 초기 상태값
const initialState = {
  number: 0,
};

이것은 initialState 입니다. 단어 그대로 초기 상태값 입니다. 즉, 어떤 State의 초기값을 정해주는 것 입니다.

이는 우리가 useState를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같은 이치입니다.

initialstate에는 꼭 객체(객체라면 여러개의 property가 추가되어도 됨)가 아니어도 되고, 배열, 원시타입이어도 된다.

(2) Reducer === 변화를 일으키는 함수

액션을 일으킨다 = dispatch -> reducer가 자동으로 실행 -> reducter가 state를 수정 -> 변화된 state store에 저장

아래 코드를 리듀서 라고 합니다. 리듀서란, 변화를 일으키는 함수입니다.

reducer <-실질적으로 useState의 setState랑 같은놈임, reducer는 함수다.

// 리듀서 
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

우리가 useState()를 사용할 때, number라는 값을 바꾸고 싶으면 setNumber를 사용했습니다.

아래 코드 처럼 number값을 변경할 수 있었습니다. 리덕스에서는 리듀서가 이 역할을 합니다.

우리가 “리듀서야 number에 +1를 해줘" 라고 명령하면, 리듀서는 number에 +1을 더해줍니다.

그래서 변화를 일으키는 함수라고 표현한 것 입니다.

// src/redux/modules/counter.js


// counter 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter; // 여기

그리고 리듀서의 인자에 보면 (state = intialState, action) 이라고 되어 있습니다.

우리는 리듀서 인자 첫번째 자리에서는 state를, 두번째 자리에서는 action 이라는 것을 꺼내서 사용할 수 있습니다. 이것이 무엇인지는 지금 당장 몰라도 됩니다. 다만, state = intialState 처럼 state에 initialState를 할당해줘야 하는 것만 기억해주세요.

(3) 카운터 모듈을 스토어에 연결하기

우리는 지금까지 모듈파일에서 초기 상태값과 리듀서를 작성했습니다. 이제 우리가 만든 모듈을 스토어에 연결 시켜야 합니다. 아직까진 모듈과 스토어가 각각 따로 분리되어 있는 상태이기 때문에 우리가 만든 State를 스토어에서 꺼낼 수 없습니다.

src/redux/modules/config/configStore.js

// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";
// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
const store = createStore(rootReducer);

export default store;

위와 같이 코드를 추가하면, 스토어와 모듈이 연결됩니다.

이렇게 스토어와 모듈을 연결시키는 코드는 우리가 모듈을 추가할 때마다 똑같이 진행해주면 됩니다.

근데, 우리가 연결을 하긴했지만 코드상으로만 하다보니 이것이 잘 된것인지 눈으로 확인이 안되서 긴가민가하죠?

이제 우리가 스토어와 모듈을 정상적으로 잘 연결했는지 눈으로 직접 확인해보겠습니다.

스토어와 모듈 연결 확인하기

(1) useSelector = 스토어 조회

우리가 생성한 모듈을 스토어에 잘 연결했는지 확인하는 방법은 컴포넌트에서 스토어를 직접 조회하면 됩니다.

컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 ‘react-redux’의 훅을 사용해야 합니다.

App.js 컴포넌트로 이동해서 기존에 있던 코드를 모두 지우고, 아래 코드를 입력해주세요.

// src/App.js

import React from "react";
import { useSelector } from "react-redux"; // import 해주세요.

const App = () => {
  const counterStore = useSelector((state) => state); // 추가해주세요.
  console.log(counterStore); // 스토어를 조회해볼까요?

  return <div></div>;
}

export default App;

브라우저를 켜고, 콘솔을 보면 아래 이미지처럼 객체가 보이고, 그 안에 counter 라는 값이 있는 것을 볼 수 있습니다. 우리가 만든 counter 라는 모듈의 state가 보이는 것을 알 수 있습니다.

이렇게 화살표 함수에서 꺼낸 state라는 인자는 현재 프로젝트에 존재하는 모든 Redux모듈의 state객체이다.

이제 우리는 어떤 컴포넌트에서도 접근 할 수 있는 스토어를 가지게 되었습니다. 만약 우리가 컴포넌트에서 number라는 값을 사용하고자 한다면 아래 코드처럼 꺼내서 사용하면 됩니다.

const number = useSelector(state => state.counter.number); // 0

최종정리

보통 모듈은 기능의 이름을 따서 파일을 생성한다.
모듈의 구성요소로는 initialState, Reducer가 있다.
모듈을 만들면, 스토어에 연결을 해야만 한다. 그리고 연결은 configStore.js에서 한다.
컴포넌트에서 Store를 조회할 때는 useSelector를 사용해야 한다.
useSelector((state)⇒state) 에서 state는 모든 모듈의 state 를 조회할 수 있는 값이다.

나만의 정리

모듈이란, State의 그룹
initialState와 reducer가 있는 컴포넌트가 모듈임
initialstate에는 꼭 객체(객체라면 여러개의 property가 추가되어도 됨)가 아니어도 되고, 배열, 원시타입이어도 된다.
액션을 일으킨다 = dispatch -> reducer가 자동으로 실행 -> reducter가 state를 수정 -> 변화된 state store에 저장
reducer <-실질적으로 useState의 setState랑 같은놈임, reducer는 함수다.
다만, state = intialState 처럼 state에 initialState를 할당해줘야 하는 것만 기억해주세요.
모듈은 store와 연결시켜야함
이렇게 스토어와 모듈을 연결시키는 코드는 우리가 모듈을 추가할 때마다 똑같이 진행해주면 됩니다.
컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 ‘react-redux’의 훅을 사용해야 합니다.
이렇게 화살표 함수에서 꺼낸 state라는 인자는 현재 프로젝트에 존재하는 모든 Redux모듈의 state객체이다.