Redux의 구성

Redux?

전역상태 라이브러리

어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보내고자 할때 우리는 Props를 통해 부모 컴포넌트에서 자식 컴포넌트로 보내주었는데, props로 state를 공유하면 여러가지 불편한 점이 있었다.

• 컴포넌트에서 컴포넌트로state를 보내기 위해서는 반드시 부>모 관계가 되어야 한다.
• 조부모 > 손자 컴포넌트로 보낼때도 반드시 부모 컴포넌트르 거쳐야한다. (부모에서 안쓰는 상태임에도 불구하고 전달하기 위해서만 쓰일때도 있음)
• 자식컴포넌트에서 부모컴포넌트로 값을 보낼수 없다.

Local state와Global state와

• Local state (지역상태) : 컴포넌트에서 useState를 이용해서 생성된 state(좁은 범위)
• Global state (전역상태) : 중앙 state관리소에서 state들이 생성된다.

 

중앙 state관리소에서 state를 생성하고, 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고있든 상관없이 원하는 state를 불러와서 쓸수 있다. 

 

ContextAPI 와의 차이

• 성능 최적화

context API는 Provider하위의 모든 컴포넌트가 리 랜더링 되는 문제점이 있다. 상태가 변경될때 마다 모든 컴포넌트가 불필요하게 업데이트 되는것을 막아준다.

• 상태로직의 중앙화와 일관성

redux는 애플리케이션의 상태를 하나의 저장소에 저장하는데, 이로 인해 상태로직이 중앙에서 관리되어 일관적이고 예측 가능한 상태 변경이 가능해 진다.

• 강력한 미들웨어와 개발도구

redux는 다양한 미들웨어를 지원하여 비동기 작업, 로깅, 상태변경에 대한 추가 처리등 복잡한 기능을 구현할수 있다.

 

1.리덕스 설치

yarn add redux react-redux

 

2.폴더구조생성

 

• redux : 리덕스와 관련된 코드들
• redux/config : 리덕스 설정 관련 파일
• redux/config/configStore.js: 중앙state관리소 store를 만든다.
• redux/modules : state들의 그룹.

 

 

 

 

 

 

 

 

configStore.js

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

/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 
*/

/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어준다
*/

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

//3. 만든 스토어 내보내기 (전역에서 써야함으로)
export default store;

 

main.jsx

// 추가 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

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

//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어준다
  <Provider store={store}> 
    <App />
  </Provider>
);

 

모듈만들기

모듈 ? state의 그룹으로, 필요한 state들이 모여있는 모듈이다.

// src/redux/modules/counter.js

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

// 리듀서
//리듀서 함수는 인자로 2개를 받는다 : state, action
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

// 모듈파일에서는 리듀서를 export default 한다.
export default counter;

 

모듈을 스토어에 연결하기

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

 

 

컴포넌트에서 store 조회하기

useSelector()훅을 사용해서 조회 가능하다!

// src/App.js

import React from "react";
import { useSelector } from "react-redux"; 

const App = () => {
  const counterStore = useSelector((state) => state); 
  console.log(counterStore); //스토어 조회 해보기

  return <div></div>;
}

export default App;