[⚛️] Redux - 소개 및 설정 + counter 앱 세팅(store 만들기)

react에서 가장 중요한 부분이라고 할 수 있는 redux.

redux가 무엇인지, 큰 흐름은 어떻게 되는지 정리해보겠다.

 

redux란?

 

📍사용 이유

• useState의 불편함
  • props를 통해서 단방향(부모 -> 자식)으로의 state 전달만 가능
  • 조부모 -> 자식 사이에 반드시 부모 컴포넌트를 거쳐야 함.

 

📍정의

• “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)
• 컴포넌트 밖에서 따로 생성
• 컴포넌트의 위치 상관없이 state 사용 가능
• Context API 보다 규모가 큰 state에서 유용

 

 

counter 앱 세팅

 

크게 네 단계로 나눌 수 있다.

1. 리덕스 설정
   1-1. 리덕스 설치
   1-2. 폴더 구조 생성
2. 설정코드 작성
   2-1. configStore.js
   2-2. store 주입(main.jsx)
3. 모듈 만들기
   3-1.  reducer 함수 만들기
   3-2. 모듈의 구성요소
   3-3. 카운터 모듈을 store에 연결
4. store와 모듈 연결 확인

 

 

1. 리덕스 설정

 

📍1-1. 리덕스 설치

기존 react vite 설치 방법

[터미널]

yarn create vite 프로젝트명 --template react

 

+ redux 프로젝트 생성

yarn add redux react-redux

# 아래와 같은 의미
yarn add redux
yarn add react-redux

 

 

📍1-2. 폴더 구조 생성

 

• src
  • redux
    • config (중앙 데이터 관리소:store)
      • configStore.js
    • modules(state들의 그룹)
      • counter.js

 

 

 

2. 설정 코드 작성

 

📍2-1. configStore.js 에서 store 만들기

1. combineReducers() : rootReducer 만들기
2. createStore() : store를 만드는 메소드(함수) 
3. store export

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store;

 

 

📍2-2. main.jsx에 store 주입하기

• App을 Provider로 감싸서 이 영역 내에서는 store를 사용할 수 있음
• 위에서 만든 store 주입

 <Provider store={store}> 
    <App />
  </Provider>

 

 

 

3. 모듈 만들기

리덕스를 통해 카운터 프로그램을 만들어 본다.

 

📍3-1. reducer 함수 만들기

• input에는 state = 초기값, action
• 로직에는 switch문 (key: action.type, state 자체를 return)

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

 

 

📍3-2. 모듈의 구성요소

• initialState === 초기 상태값 
  • 객체에 여러 개의 변수를 넣어줄 수 있음
  • 초기 상태값은 객체 외에도 배열, 원시데이터가 될 수 있음

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

 

 

• Reducer === 변화를 일으키는 함수
  • reducer는 변화를 일으키는 함수다.(= useState에서 setState의 역할)
  • state에 초기값을 할당해야 함

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

 

 

 

📍3-3. 카운터 모듈을 store에 연결

• configStore.js 로 이동하여 코드 추가(2-1 로직 참고)

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

 

 

 

4. store와 모듈 연결 확인

 

• App.jsx 컴포넌트에서 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
});

 

 

 

---

configStore.js에서 store를 생성하고,

main.jsx에 store를 주입하고,

module을 만들며 reducer 함수를 생성했다.

 

이렇게 만든 reducer에게 어떻게 명령을 전달할 지,

reducer는 받은 명령을 어떻게 처리할 지에 집중하여 다음 단계를 생각해봐야 한다.