[Redux] 리덕스 설치하기! (feat. 설치하는 이유는?)

리덕스(Redux)가 필요한 이유 

useState의 불편함

조부모 컴포넌트에서 손자 컴포넌트로 값을 보낼 때 반드시 부모 컴포넌트를 거쳐 전달해야 되는 문제점이 있습니다.
(조부모->부모->손자)

 

부모 컴포넌트는 그 값이 필요로 하지 않아도 단순히 손자 컴포넌트에게 값을 전달하기 위해
불필요하게 거쳐야만 되기 때문에 중간 컴포넌트가 많아지면 엄청난 불편함과 동시에 리-렌더링이 일어나게 되어 성능도 저하되는 현상이 발생합니다.

이러한 불편함을 겪지 않기 위해 [전역 상태관리 라이브러리]를 사용하는데 그중 하나가 리덕스(Redux) 입니다.

Redux를 사용하게 되면 Store에서 상태를 관리하고 업데이트해 줍니다.
스토어는 컴포넌트 밖에서 관리를 해주기 때문에 컴포넌트를 차례대로 타고 가서 데이터를 주지 않고 어디서든 바로 전달할 수 있습니다.

 

리덕스(Redux)의 대표적인 룰

하나의 애플리케이션은 하나의 Store만 가진다. 리듀서는 순수함수이다. 동일한 파라미터로 호출된 리듀서는 언제나 같은 패턴의 결과값을 반환해야만 한다. state는 read-only(읽기전용) 이다. 기존의 state 고유 값은 수정하지 않고 새로운 state를 만들어 이를 수정하는 방식으로 업데이트를 한다. 이는 리덕스 고유의 불변성을 지키기 위함이다.

 

 

1. 모듈 설치

redux 와 리액트와 redux를 바인딩 해주는 react-redux 설치

npm i redux react-redux

이렇게 하면 redux와 react-redux 2개를 동시에 설치할 수 있다!

 

2. 기본 설정

폴더구조

src / redux / config / configStore.js
src / redux / modules

redux : 리덕스 관련 코드를 모두 몰아넣음
config : 리덕스 설정 관련 파일 전부
configStore : 중앙 state 관리소(store) -> 설정 코드(.js)
modules : state의 그룹 ex) 투두리스트이면 todo.js 파일

 

1. src / redux / config / configStore.js에 설정 코드를 작성합니다.

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

const rootReducer = combineReducers({}); //<< 여기에 reducer가 들어갑니다.

const store = createStore(rootReducer); 

export default store;

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

combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.

 

2. 디렉토리의 가장 최상단에 있는 index.js에 코드를 작성합니다.

// 원래부터 있던 코드
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(

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

 

 

3. 모듈(reducer) 만들기

src/redux/modules/(파일 이름).js

// 초기 상태값
const initialState = {
  ex) number: 0,
  ex) name : "탱구"
};

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

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

 

리듀서 (reducer) 란?

상태를 변화시키는 일을 하는 함수입니다. 

useState()를 사용할 때, number라는 값을 바꾸고 싶으면 setNumber를 사용했습니다.

const onClickr = () => {
	setNumber(number + 1); // setState를 이용해서 state 변경
}

리덕스에서는 리듀서 (reducer) 가 이 역할을 합니다.

“리듀서 (reducer) 야 number에 +1를 해줘" 라고 명령하면, 리듀서는 number에 +1을 더해주는 역할을 합니다.

 

기본설정은 이렇게 완료 되었습니다. 

다음은 redux를 이용하여 간단한 예제를 통해 사용법에 대해 알아보겠습니다.