(펌)개념 정리

리덕스 설정하는 방법

ble194 2022. 7. 29. 15:29

리덕스 설정

(1) 리덕스 설치

리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 합니다. vscode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치하세요. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지 입니다.

yarn add redux 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 파일이 곧 하나의 모듈이 됩니다.

2. 설정 코드 작성

  • (1) 설정 코드 작성 시, 주의사항
    1. 우리가 작성하는 설정코드는 이해할 필요가 없는 코드들 입니다, 코드 분석 금지 ❌
    2. 설정 코드를 작성하는 이유는 리덕스를 만든 리덕스팀에서 이렇게 설정을 하라고 안내하고 있기 때문입니다.
    3. 리덕스 사용 “방법”을 중점으로 공부해야 합니다.지금 우리가 배우는 리덕스도 마찬가지 입니다. 리덕스를 어떻게 만들었는지, 왜 이렇게 설정하는지는 중요하지 않습니다. 우리가 해야할 것은 단지 리덕스를 쓰는 방법만 익히면 됩니다.
    4. 우리가 핸드폰을 샀을 때, 핸드폰을 잘 사용하기위해서 핸드폰을 분해해서 어떤 부품으로 핸드폰을 만들었는지, 그 부품의 목적은 무엇인지 공부하시나요?
  • (2) src/configStore.js 
    import { createStore } from "redux";
import { combineReducers } from "redux";

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

export default store;
  • src/configStore.js 에 아래 코드를 입력하세요.
  • (3) 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를 넣어줍니다.
  
    
  
);

// 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();
  • 디렉토리의 가장 최상단에 있는 index.js에 아래 내용을 입력하세요.

3. 정리

  • 리액트에서 리덕스를 사용하려면, redux, react-redux 가 필요하다.
  • 설정코드는 지금 당장 이해 할 필요가 없다.
  • “중앙 State 관리소"를 Store (스토어)라고 부른다.
  • 모듈이란, State들이 그룹이다.