Redux 카운터 프로그램 만들기

# 첫 모듈 만들기

첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 된다. 

 

1. modules 폴더에 counter.js 파일을 생성한다.

 

2. 코드 작성

// src/modules/counter.js

// 초기 상태값
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를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같은 이치이다. 

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

 

위 코드에서만든 State의 초기값은 { } (객체) 이고, 그 안에 number 라는 변수에 초기값 0을 할당해준 것이다.

초기값은 꼭 객체가 아니어도 된다. 배열이 되어도 되고, 그냥 원시데이터가 돼도 된다.

그리고 객체에도 여러개의 변수를 넣어줄 수 있다. 

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

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

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

 

 

 

2. 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를 할당해줘야 하는 것만 기억할 것.

 

 

 

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

지금까지 모듈파일에서 초기 상태값과 리듀서를 작성했다. 이제 만든 모듈을 스토어에 연결 시켜야 한다.

아직까진 모듈과 스토어가 각각 따로 분리되어 있는 상태이기 때문에 우리가 만든 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;

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

 

 

 

 

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

1. 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;

 

브라우저를 켜고, 콘솔을 보면 아래 이미지처럼 객체가 보이고, 그 안에 counter 라는 값이 있는 것을 볼 수 있다.

counter 라는 모듈의 state가 보이는 것을 알 수 있다.

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

 

이제 어떤 컴포넌트에서도 접근 할 수 있는 스토어를 가지게 된 것이다.

만약 컴포넌트에서 number라는 값을 사용하고자 한다면 아래 코드처럼 꺼내서 사용하면 된다. 

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

 

 

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

react-redux에서 제공하는 useSelector 라는 훅을 사용한다. (매우 중요 🔥)