개발자를 향해...

[초보자를 위한 리덕스 101] #3.0 Setup ~ #3.1 Connecting the Store 본문

카테고리 없음

[초보자를 위한 리덕스 101] #3.0 Setup ~ #3.1 Connecting the Store

eugeneHwang1124 2021. 3. 9. 20:34
728x90
반응형

본 글은 노마드코더 님의 [초보자를 위한 리덕스 101]을 수강하며 작성하였습니다.

 

#3.0 Setup

src 하위에 components라는 폴더를 생성한다. 그리고 index.js를 전체 폴더하위에 생성한다.

index.html의 body부분을 다음과 같이 바꾼다.

<body>
    <div id="root"></div>
  </body>

그리고 App.js에 다음 코드를 넣는다.

import React from "react";

function App(){
    return"App"
}

export default App;

마지막으로 index.js에 다음코드를 작성한다.

import React from "react"
import ReactDOM from "react-dom"
import App from "./components/App"

ReactDOM.render(<App></App>, document.getElementById("root"))

이제 실행해보면 잘 작동하는것을 볼 수 있다.

npm add react-redux react-router-dom으로 두가지를 추가해준다. Detail과 Home 페이지가 필요하기 때문이다.

이제 두 페이지를 src 폴더의하위에 routes폴더를 만들어 생성한다.

 

detail.js와 Home.js에 다음 코드를 작성한다.

export default()=>"Detail~";
export default()=>"Home~";

App.js

import React from "react";
import {HashRouter as Router, Route} from "react-router-dom"
import Home from "../routes/Home";

function App(){
    return <Router>
        <Route path="/" exact component={Home}></Route>
        <Route path="/:id" exact component={Detail}></Route>
    </Router>
}

export default App;

이제 코드를 작성해보자. Home.js에 다음 코드를 작성한다.

import React, { useState } from "react";

 function Home() {
   const [text, setText] = useState("");
   function onChange(e) {
     setText(e.target.value);
   }
   function onSubmit(e) {
     e.preventDefault();
     setText("");
   }
   return (
     <>
       <h1>To Do</h1>
       <form onSubmit={onSubmit}>
         <input type="text" value={text} onChange={onChange} />
         <button>Add</button>
       </form>
       <ul></ul>
     </>
   );
 }

 export default Home;

 

#3.1 Connecting the Store

 

src 하위에 store.js를 생성한다. 여기에 우리가 만들었던 reducer와 같은 역할을 만들기 위해

import { createStore } from "redux";

const ADD = "ADD";
const DELETE = "DELETE";
 
const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
        return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
        return state.filter(toDo => toDo !== action.id);
    default:
        return state;
    }
};

이제 생성한 reducer를 사용하기 위해  밑에 store를 생성한다.

import { createStore } from "redux";

const ADD = "ADD";
const DELETE = "DELETE";

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
        return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
        return state.filter(toDo => toDo !== action.id);
    default:
        return state;
    }
};

const store = createStore(reducer);

export default store;

이후 변수형태를 만들어주자.

import { createStore } from "redux";

const ADD = "ADD";
const DELETE = "DELETE";

export const addToDo = text => {
  return {
    type: ADD,
    text
  };
};

export const deleteToDo = id => {
    return {
        type: DELETE,
        id
    };
};

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
        return [{ text: action.text, id: Date.now() }, ...state];
    case DELETE:
        return state.filter(toDo => toDo !== action.id);
    default:
        return state;
    }
};

const store = createStore(reducer);

export default store;

이렇게 생성한 store의 변동사항에 대해 subscribe하자.

index.js로가서

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);
반응형