6월 20일 TIL - redux로 todolist 만들기 (1)

할게 너무 많지만 .. 차근차근 해봐야죠 ..

 

우선 redux로 todolist 만들기 위해서 아래 명령어를 통해 CRA 프로젝트를 만들어주고

yarn create react-app todoredux

 

 

redux를 사용할 것이기 때문에 아래의 패키지도 다운받아준다

yarn add redux
yarn add react-redux
// yarn add react-redux redux 로 한번에 다운 가능

 

폴더 구조는 우선 아래처럼 잡고 시작했다.  (후에 변동있음)

 

src

ㄴ redux (리덕스 설정 관련 코드들을 몰아넣음)

    ㄴ config (리덕스 설정 관련 파일 전부)

        ㄴconfigStore.js (중앙 데이터, 즉 state 관리소)

    ㄴ modules (리덕스 안에서 사용할 모듈들, state의 그룹)

        ㄴtodo.js (todo state)

ㄴ pages

    ㄴ Main.jsx (메인 todo list 페이지)

    ㄴ Detail.jsx (각 todo별 세부페이지)

ㄴ shared

    ㄴ Router.js (라우터 설정 파일)

 

 

---

 

 

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

configStore.js는 중앙데이터관리소(store)를 설정하는 부분이기 때문에, redux로부터 2가지의 api를 가지고 와야한다

 

 

const rootReducer = combineReducers({});//인자로 객체를 넘겨야하는데, 아직 없으니 빈객체 넘기기
const store = createStore(rootReducer);

combineReducers메소드를 통해 리듀서들을 하나로 묶어 rootReducer를 만든다 (리듀서들을 하나로 묶어놓은 기본 리듀서)

combineReducers 메소드 안에 인자로 modules안에 넣어둔 state의 묶음들을 객체형태로 넣어주면 된다. (아직 없어서 빈객체)

=> 그렇게 되면 웹애플리케이션 내에서 관리하는 state의 집단들이 rootReducer로 들어오게 되고, 모든 컴포넌트들은 props로 값을 내려주지 않더라도 이 중앙데이터 관리소로 데이터를 바라볼 수 있게 됨

만든 rootReducer를 가지고 중앙데이터관리소인 store를 만든다

 

이렇게 만든 store를 바깥으로 내보내기 위해 export를 해준다

 

 

 

 

 

 

index.js로 넘어가 App컴포넌트를 Provider 컴포넌트로 감싸주기! 

그러면 app 컴포넌트가 provider 컴포넌트의 지배권 안으로 들어오게 되는데, 여기서 provider는 방금 만든 store를 기반으로 지배권을 행사하는 것 (store로 만들어 놓은 중앙데이터를 app컴포넌트가 있는 전체에서 사용가능하게 만듦)

그리고 store import 해주기 필수!

//index.js

import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

 

 

 

 

 

---

 

 

 

 

 

이제 state의 그룹인 modules 폴더에 todo.js 만져주기

//todo.js

import uuid from "react-uuid";

const initialState = {
  todo: [
    {
      id: uuid(),
      title: "1",
      contents: "11",
      isDone: false,
    },
    {
      id: uuid(),
      title: "2",
      contents: "22",
      isDone: true,
    },
  ],
};

todo 리스트에 들어갈 초기값부터 세팅해준다.

 

그리고 리듀서를 만들어줘야 하는데,

리듀서는 state를 입력받은 action의 type에 따라 변경을 일으키는 함수라고 생각하면 된다. 

//todo.js
const todos = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

위 리덕스를 보면 인자를 2개를 받는다.  => state 와 action 

action은 객체형태로 type과 value값이 있는데, action이 들어올때, switch문을 통해서 action.type에 따라 state값을 변경한다.

 

이렇게 만든 todos리듀서를 export 해주기

 

 

 

 

 

---

 

 

 

 

todos 리듀서를 만들어줬으니! 이제 configStore.js에 가서 rootReducer 안에 todo 리듀서를 넣어주어야 한다. 

//configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";
import todos from "../modules/todo";


const rootReducer = combineReducers({
  todos: todos,
});
const store = createStore(rootReducer);

export default store;

import해서 rootReducer 안에 객체 형식 (key-value pair)으로 넣어주기 

 

 

 

 

 

 

---

 

 

 

 

이제 Main.jsx에서 store에 접근하여 todos의 값을 읽어와 화면을 구성해야한다. 

라우터를 사용해야하기 때문에 아래 패키지를 깔아준다

yarn add react-router-dom

 

 

Router.js 파일에가서 아래 3개를 import 해온다

import { BrowserRouter, Route, Routes } from "react-router-dom";

 

 

import Main from "../pages/Main";
import Detail from "../pages/Detail";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="detail" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

위 구조대로 BrowserRouter 안에 Routes 안에 Route를 넣고 Route의 path와 element 값을 주어 특정 컴포넌트와 연결시켜준다

 

 

이제 App.js로 가서 

import "./App.css";
import Router from "./shared/Router";

function App() {
  return <Router></Router>;
}

export default App;

라우팅하고 export 한 Router를  App 컴포넌트 안에 넣어주면 된다!