Redux - 카운터 프로그램 만들기
이번 시간이 끝나면 여러분은
1. useState를 통해서 만들었던 count 프로그램을 리덕스를 사용하여 다시 만들어보게 됩니다.
1. 모듈 만들기
(1) 우리가 리덕스로 만들 첫 프로그램은?
우리가 리덕스로 처음 만들어 볼 것은 예전에 만들었던 카운터 프로그램 입니다. useState 로 만들었던 것을 리덕스로 다시 만들어봅시다.
(2) 첫 모듈 만들기
모듈이란, State의 그룹이라고 했습니다. 우리의 첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 될 것 입니다. 아래 순서대로 파일을 생성하고 코드를 입력해볼까요?
modules폴더에counter.js파일을 생성한다.- 코드를 작성한다.
// src/redux/modules/counter.js
// 초기 상태값
const initialState = {
number: 0,
};
// 리듀서
const counter = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
// 모듈파일에서는 리듀서를 export default 한다.
export default counter;2. 모듈의 구성요소 살펴보기
(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/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;위와 같이 코드를 추가하면, 스토어와 모듈이 연결됩니다. 이렇게 스토어와 모듈을 연결시키는 코드는 우리가 모듈을 추가할 때마다 똑같이 진행해주면 됩니다.
근데, 우리가 연결을 하긴했지만 코드상으로만 하다보니 이것이 잘 된것인지 눈으로 확인이 안되서 긴가민가하죠? 이제 우리가 스토어와 모듈을 정상적으로 잘 연결했는지 눈으로 직접 확인해보겠습니다.
3. 스토어와 모듈 연결 확인하기
(1) useSelector = 스토어 조회
우리가 생성한 모듈을 스토어에 잘 연결했는지 확인하는 방법은 컴포넌트에서 스토어를 직접 조회하면 됩니다. 컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 ‘react-redux’의 훅을 사용해야 합니다.
