Redux 설치 및 기본 구성

Redux를 사용하는 이유

React 에서 는 여러가지 컴포넌트를 만들고 원하는곳에 꺼내다가 사용하는 구조다.

개발을 하다 보면 state를 사용하게 되는데 다른컴포넌트에서 state를 사용하려면 props 로 전송해서 사용해야한다.

그런데 props는 부모컴포넌트->자식컴포넌트 간에만 전송이 가능하고 자식-> 부모 컴포넌트의 전송은 불가능하다.

그러나 Redux에서는 store 라는 중앙관리소 에 state를 넣어두고 props 전송 없이 모든 컴포넌트가 필요할때 가져다 쓸 수있다.

 

Redux 설치 및 기본 세팅

1. redux / react-redux 라이브러리 두개를 설치한다.

//npm ,yarn 아무거나 사용가능
yarn add redux
yarn add react-redux

2.폴더 구조 생성

1. `src` 폴더 안에 `redux` 폴더를 생성
2. `redux` 폴더 안에 `config`, `modules` 폴더를 생성
3. `config` 폴더 안에 `configStore.js`파일을 생성

 

각 폴더와 파일의 역할
- `redux` : 리덕스와 관련된 코드를 모두 모아 놓을 폴더
- `config` : 리덕스 설정과 관련된 파일들을 놓을 폴더
- `configStore` : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일

- `modules` : 우리가 만들 State들의 그룹.

예를 들어 `투두리스트`를 만든다고 한다면, 투두리스트에 필요한 `state`들이 모두 모여있을 `todos.js`를 생성하는데, 이  `todos.js` 파일이 곧 하나의 모듈이다.

 

4.configStore.js 기본 문법 세팅

기본 문법 세팅은 리덕스에서 안내한대로 한다. 

설치/셋팅 방법일뿐이니 이해할 필요가 없다. 

//configStore.js 
import { createStore } from "redux";
import { combineReducers } from "redux";


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

export default store;

5.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}> 
    <App />
  </Provider>
);


reportWebVitals();

 

Redux 사용법 

1. 모듈 초기 구성 

// src/modules/counter.js

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

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

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

2. initialState 선언

모듈은 state의 들이 모여있는 곳이다. 

// src/modules/counter.js

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

initialState는  useState를 사용했을 때 괄호 안에 초기값을 지정해주던 것과 같은 것이다.

const [number, setNumber] = useState(0) // < 여기

위 코드에서만든 State의 초기값은  { } (객체) 이고, 그 안에 number 라는 변수에 초기값 0을 할당해준 것이다.

초기값은 꼭 객체 뿐만아니라, 배열이 되어도 되고, 그냥 원시데이터도 된다.

// 초기값이 0
const initialState = 0;

// 초기값이 0이 있는 배열 
const initialState = [0];

// 초기값이 number = 0, name = '석구'인 객체
const initialState = {
	number: 0,
	name: '석구'
};

3. Reducer 선언

리듀서는 변화를 일으키는 함수이다. 

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

위의 코드처럼 useState() 를 사용할때 , number 라는 값을 바꾸고 싶으면 setNumber를 사용했는데,

리덕스에서는 리듀서가 이 역할을 한다.

리듀서 인자 첫번째 자리에는 initialSate를,  두번째 자리에는 action 이라는 것을 꺼내서 사용한다. 

action은 값을 변경할때 사용한다. 

 

4. 모듈을 스토어에 연결

위에서 작성한 initialState와 reducer를 스토어에 연결한다.  작성된 모듈을 스토어에 저장해 놓는다고 생각하면 된다.

configStore.js 로 이동해서 아래 코드를 추가 한다.

// src/redux/modules/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;

5. 스토어와 모듈 연결 확인

1.useSelector 로 스토어 조회

모듈이 스토어에 잘 연결됬는지 확인하는 방법은 컴포넌트에서 스토어를 직접 조회하면 된다.

컴포넌트에서 리덕스 스토어를 조회하고자 할때는 useSelector라는 'react-redux'훅을 사용하면 된다. 

 

2. useSelector 사용법

// 1. store에서 꺼낸 값을 할당 할 변수를 선언
const number = 

// 2. useSelector()를 변수에 할당
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수 입력
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return

  const number = useSelector((state) => state.counter.number);
  console.log(number); 
  // output {number:0}