[React 숙련] 1주차_Redux

오늘의 학습내용 :  Redux

 

◆ Redux

Redux는 자바스크립트 어플리케이션 상태 관리 라이브러리로, React Tool kit을 설치해서 React 라이브러리와 함께 사용할 수도 있다. 프론트엔드 개발에서는 전역 상태 관리 라이브러리로 표현되는데, Global State를 관리하도록 돕기 때문이다.

• 동일한 상태와 액션이 리듀서에 전달되면 순수함수인 리듀서는 멱등성을 보장한다.
• 다른 상태관리 라이브러리에 비해 엄격한 코드 구성 방법을 갖추고 있어 코드 유지보수에 유용하다.
• 액션, 상태 변화가 로그에 기록되기 때문에 개발자가 디버깅하기 용이하다.

다만 리덕스를 사용해서 코드를 작성할 경우 필수적으로 만들어지는 파일이 있는데다가 스토어와 컴포넌트를 연결할 때 메서드를 필요로 하기 때문에 사용되는 코드의 양이 늘어날 수 있다. 또한 상태를 읽기 전용으로 '취급' 하기 때문에 직접 수정하는 실수를 하지 않도록 주의해야 한다.

 

Local state / Global state
지역 상태(Local state)는 useState를 이용해 생성한 상태로, 좁은 범위 안에서의 state이다. 반면 전역 상태(Global state)는 state의 위치와 관계없이 어디에서든 사용할 수 있다. 전역 변수(Global variable)를 배웠던 경험을 떠올려보면 좋다. 어떠한 상태를 리액트 코드 전역에서 사용하기 위한 상태 관리의 경험인 것이다.

 

 

◆ Redux 사용해보기

 

yarn add redux react-redux

 

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

/*
1. createStore() : 리덕스의 핵심이 되는 스토어를 만드는 메서드이다.
*/

/*
2. combineReducers() : 여러 개의 독립적인 reducer의 반환값을 하나의 상태 객체로 만든다.
*/

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

export default store;

 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 추가로 작성
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

◆ 모듈

 

리덕스 모듈은 액션 타입, 액션 생성함수, 리듀서가 들어있는 자바스크립트 파일이다. 리덕스 관련 코드는 원하는 방식대로 분리해도 상관없다!

 

상태에 어떠한 변화가 예상될 때는 액션을 발생시킨다.

const SET_LOAD = 'book/LOAD';
const SET_CREATE = 'book/CREATE';
const SET_DELETE = 'book/DELETE';
const SET_MODIFY = 'book/MODIFY';

 

액션 생성함수는 실제로 컴포넌트에서 디스패치되는 함수로, 파라미터를 받아와서 액션타입과 함께 객체로 return한다.

export function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}
// export로 내보내서 사용하고 type값이 필요하다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});