React - Redux

1. Create react app

• 지금까지 배운 내용을 이용하여 빠르게 구현
• index에서는 App.js에서 App을 받아와 root로 렌더링
• App에서는 react-router-dom을 이용하여 home과 detail을 렌더링
• Home.js에서는 ToDo를 구현
• Hooks를 이용하여 state를 관리

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./componenets/App";

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

app.js

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

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

export default App;

Home.js

import React, { useState } from "react";

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

export default Home;

2. Create redux

• 먼저 redux를 이용하여 store.js를 생성한다.
• createStore()를 이용하여 store 변수에 redux state를 생성한다.
• reducer function을 생성하여 state의 data를 수정할 function을 생성한다.
• reducer function은 action.type을 통해 결정하게 되며, action.type은 변수로 저장하여 헷갈리지 않도록 한다.
• dispatch에 이용하는 type과 props도 fuction으로 저장하여 이용.

store.js

import { createStore } from "redux";

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

const addToDo = (text) => {
    return {
        type: ADD,
        text
    }
}

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;

Home.js

const Home = ({toDos, addToDo}) => {
~~~
}

const mapStateToProps = (state) => {
    return { toDos: state }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToDo: text => dispatch(actioncreators.addToDo(text))
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

3. Use Redux in React

• React에서 redux를 이용하기 위해서는 먼저 index에서 App에 provider를 사용한다.
• 그리고 Home에서 connect() 함수를 사용한다.
• Connect() 함수는 getState 역할을 하는 mapStateToProps와 dispatch 역할을 하는 mapDispatchToProps 두 가지 매개변수가 존재한다.
• 각각의 mapStateToProps와 mapDispatchToProps가 return하는 props는 Home에서 props로 받아 사용할 수 있다.

index.js

import store from "./store";
import { Provider } from "react-redux";

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

store.js

const store = createStore(reducer);

export const actioncreators = {
    addToDo,
    deleteToDo
}

Home.js

const mapStateToProps = (state) => {
    return { toDos: state }
}

const mapDispatchToProps = (dispatch) => {
    return {
        addToDo: text => dispatch(actioncreators.addToDo(text))
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

4. Hooks와 Redux의 차이점을 이해하기

• Hooks는 React에서 state를 쉽게 관리하기 위한 것이다.
• Redux는 React 뿐만 아니라 바닐라에서도 사용할 수 있으며 App 전체의 State를 관리하는 패키지이다.