[Redux] React Redux 기본 개념과 설치/세팅 정리

1. Redux란?

상태관리 라이브러리, 중앙 state 관리소를 사용할 수 있도록 도와주는 패키지

컴포넌트 간에 state 데이터들을 부모-자식 관계로 설정하여 props를 통해 한정적으로 전달하지 않고, 중앙에서 관리하여 어떤 컴포넌트에서든 쉽게 접근하고 제어할 수 있도록 해준다.

 

1) Redux의 흐름

1. View에서 액션이 일어난다.
2. dispatch에서 action이 일어나게 된다.
3. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다.
4. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다.
5. reducer의 실행결과 store에 새로운 값을 저장한다.
6. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다.

 

2) Provider

• Redux의 가장 기본 요소로서, Redux를 사용하는 이유는 state를 관리하고 Global하게 사용하기 위함
• 이렇게 하기 위해서는 가장 최상위 컴포넌트에 Provider 컴포넌트를 부모 컴포넌트로 만들어줌
• 보통 CRA를 통해서 리액트 앱을 만들게 되면 App 컴포넌트가 가장 상위 컴포넌트가 되는데, App 컴포넌트 내부의 컴포넌트들이 store를 사용할 수 있게 하기 위해 <Provider />로 wrapping 해주어야 함

 

3) Action

• state에 어떤 변화가 필요하게 될 때, action이라는 것을 발생시킴
• 순수 JS 객체의 형태이며, action type과 payload 두 매개변수를 갖는다
• type은 필수, payload는 옵션
• action 객체는 action type을 payload만큼 처리

 

4) Action Creator

• action 객체를 리턴하는 함수
• 단순히 매개변수를 받아와서 액션 객체 형태로 만들어주는 역할
• Action Creator를 사용하는 이유는, 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위해서다. 그래서 보통 export하여 다른 파일에서 불러와서 사용

 

5) Reducer

• state에 변화를 일으키는 함수
• 현재의 state를 action의 type에 따라 변경하는 함수로, input에 state와 action 두 파라미터를 갖는다

const initialState = { number: 0 }
const reducerName = (state = initialState, action) => {
	switch (action.type) {
		case CASE_ONE:
			return { number: state.number +1 };
		case CASE_TWO:
			return { number: state.number -1 };
		default:
			return state;
	}
};

• Action을 실행하는 함수

 

6) 그 외

(1) Store

• State를 저장하고 관리할 수 있는 중앙 state 관리소

 

(2) Dispatch

• store의 내장함수
• action을 reducer에게 전달하여 action을 발생시키는 것

 

(3) Subscribe

• store 내장함수
• subscribe 함수에 특정 함수를 전달해주면, action이 dispatch 되었을 때마다 전달해 준 함수가 호출
• React에서는 useSelector Hook 또는 connect 함수 사용

 

---

2. 프로젝트에 설치 후 기본 세팅 과정

 

1) 설치

# Yarn
yarn add redux
yarn add react-redux

# 위의 2개를 한 줄로 설치
yarn add redux react-redux

# NPM
npm install @reduxjs/toolkit

 

2) 폴더 구조

📦src
 ┣ 📂redux : redux 관련 코드 파일
 ┃ ┣ 📂config : redux 설정 관련 파일(redux 폴더 내부에 config 폴)
 ┃ ┃ ┗ 📜configStore.js : configStore : 중앙 state 관리소 -> 설정 코드 (.js) 파일
 ┃ ┗ 📂modules : modules : state의 그룹 (ex. Todo-list 프로젝트를 만든다면 todo.js 파일)
 ┃ ┃ ┗ 📜todos.js
 ┣ 📂components
 ┣ 📜index.js
 ┗ 📜App.jsx

 

3) configStore.js

// configStore.js -> 중앙 데이터 관리소(store)를 설정하는 파일
import { createStore } from "redux";
import { combineReducers } from "redux";
import todos from "../modules/todos";

// rootReducer: reducer들을 모아서 하나로 만들어 놓은 기본 reducer
const rootReducer = combineReducers({
  // 객체에서 key-value가 같으면 생략해서 1번만 작성 가능
  // todos: todos,
  todos,
});
const store = createStore(rootReducer);

// 위에서 만든 store를 사용하기 위해 밖으로 export
export default store;

 

4) index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 아래 두 개 import
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// provider: 위에서 만들었던 store을 기반으로 지배권을 행사하도록 하는 것
// <Provider>로 <App /> 컴포넌트를 감싸면,
// App 컴포넌트가 Provider의 지배권 안으로 들어옴
  <Provider store={store}>
    <App />
  </Provider>
);

 

5) 모듈 파일(todos.js 예시)

Ducks pattern

• 모듈파일은 ducks pattern으로 작성한다

Ducks pattern이란?
1. Reducer 함수를 export default 한다.
2. Action Creator 함수들을 export 한다.
3. Action type은 app/reducer/ACTION_TYPE 형태로 작성한다.
➡️ 모듈 파일 1개에 Action type, Action Creator, Reducer가 모두 존재하는 작성 방식

// Action
// 2개의 input - 1. type, 2. payload
// type의 처리를 payload만큼 해준다

// Action values
// human error를 줄이기 위해서 action type을 변수화해주는 것
export const ADD_TODO = "ADD_TODO";
export const DELETE_TODO = "DELETE_TODO";
export const ISDONE_TODO = "ISDONE_TODO";

// Action Creator
export const add_todo = (todo) => {
  return {
    type: ADD_TODO,
    todo: {
      id: todo.id,
      title: todo.title,
      content: todo.content,
      isDone: todo.isDone
    },
  };
};

export const delete_todo = (id) => {
  return {
    type: DELETE_TODO,
    id,
  };
};

export const isdone_todo = (isDone) => {
  return {
    type: ISDONE_TODO,
    isDone,
  };
};

// state의 초기 상태값
const initialState = {
  todos: [
    {
      id: uuid(),
      title: "저녁에 헬스장 가기",
      content: "웨이트 운동 30분 꼭 하기",
      isDone: false,
    },
    {
      id: uuid(),
      title: "리액트 숙제 하기",
      content: "to-do list 만들기",
      isDone: true,
    },
  ],
};

// Reducer
// 2개의 input - 1. state, 2. action
// output - 새로운 store
// export 해서 configStore의 combineReducers의 목록에 넣어주기
export const todos = (state = initialState, action) => {
  // if문 또는 switch문으로 액션을 지정
  switch (action.type) {
    case ADD_TODO:
      return {...state,
        todos: [...state.todos, action.todo],
      };
    
    case DELETE_TODO:
      return {...state, 
        todos: [...state.todos.filter((todo)=>todo.id !== action.id)],
      };
    
    case ISDONE_TODO:
      return {
        todos: state.todos.map((todo) => {
          if (todo.id === action.isDone) {
            return { ...todo, isDone: !todo.isDone };
          } else {
            return todo;
          }
        })
      };
      
    default:
      return state;
  }
 };

 

6) App.jsx

import { useSelector } from "react-redux";

const App = () => {

  // 여기에서 store에 접근하여, counter의 값을 읽어오고 싶다
  // Redux Hook 사용 - useSelector
  // state: 중앙 저장소 state 전체
  const data = useSelector((state) => {
    return state;
  });

  console.log(data);

  return <div>Redux!!</div>;
};

export default App;