React - 모듈 구성

모듈이란, state의 그룹이라고 했다. 현재 강의에서 만들고자 하는 것은 카운터 프로그램이다. useState로 만들었던 것을 리덕스로 만들어보자.

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

useState를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같은 이치이다.
state의 초기값은 위의 예시처럼 꼭 객체일 필요는 없다. 초기값은 배열이어도 되고, 원시 데이터가 되어도 괜찮다.

// 초기값이 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를 사용했다.
리덕스에서는 리듀서가 이 역할을 한다.

// src/redux/modules/counter.js

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

export default counter; // 여기

당장은 이 함수에 대해 충분히 이해하지 못할지라도, 리듀서 인자 첫번째 자리에 state를, 두번째 자리에는 action이라는 것을 둔다는 사실을 기억하자.

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

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

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
});

참고로 useSelector Hook은 react-redux에서 제공하는 Hook이다!