모듈의 구성요소

초기 상태 값

modules폴더에 ' '파일을 생성
initialState === 초기 상태값

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

단어 그래도 초기 상태값 이다. 즉 어떤 State의 초기값을 정해주는 것이다. 우리가 useState를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같은 이치이다.

const [number, setNumber] = useState(0) // < 여기

위 코드에서만든 State의 초기값은 { } (객체) 이고, 그 안에 number 라는 변수에 초기값 0을 할당해준 것입니다. 초기값은 꼭 객체가 아니어도 됩니다. 배열이 되어도 되고, 그냥 원시데이터가 되도 됩니다. 그리고 객체에도 여러개의 변수를 넣어줄 수 있습니다.

// 초기값이 0
const initialState = 0;

// 초기값이 0이 있는 배열 
const initialState = [0];

// 초기값이 number = 0, name = '석구'인 객체
const initialState = {
	number: 0,
	name: '석구'
};

Reducer === 변화를 일으키는 함수

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

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

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

아래 코드 처럼 number값을 변경할 수 있었습니다.

// 예시 코드

const onClickHandler = () => {
	setNumber(number + 1); // setState를 이용해서 state 변경
}

리덕스에서는 리듀서가 이 역할을 합니다.

우리가 “리듀서야 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를 할당해줘야 하는 것 기억.

모듈을 스토어에 연결하기

아직까진 모듈과 스토어가 각각 따로 분리되어 있는 상태이기 때문에 우리가 만든 State를 스토어에서 꺼낼 수 없습니다.

configStore.js로 이동

// 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;

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

useSelector = 스토어 조회
우리가 생성한 모듈을 스토어에 잘 연결했는지 확인하는 방법은 컴포넌트에서 스토어를 직접 조회하면 됩니다. 컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 ‘react-redux’의 훅을 사용해야 합니다.

useSelector의 사용법은 아래와 같습니다.

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
// 우리가 useSelector를 처음 사용해보는 것이니, state가 어떤 것인지 콘솔로 확인해볼까요?
const number = useSelector((state) => {
	console.log(state)
	return state
});

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;

우리는 컴포넌트에서 스토어를 조회할 때

react-redux에서 제공하는 useSelector 라는 훅을 사용합니다.

정리

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