항해 20일차 (또dux)

항해 20일차

오늘은 redux에 대해 파보았다. 기존에 만들었던 todolist에서 간단하게 추가 기능과 삭제 기능만 구현하여 redux로 바꾸어보았다.

간략하게 보자면

import React, { useState } from "react";

function App() {
  const [users, setUser] = useState([
    { id: 1, title: "이동언", body: "나는 이동언이다.", isDone: false },
  ]);
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const titlechange = (e) => {
    setTitle(e.target.value);
  };

  const bodychange = (e) => {
    setBody(e.target.value);
  };

  const addbtn = () => {
    // 추가 버튼
    const newUsers = {
      id: users.length + 1,
      title: title,
      body: body,
      isDone: false,
    };
    setUser([...users, newUsers]);
    setTitle("");
    setBody("");
  };

  return (
    <div className="최상단">
      <div>마이투두리스트</div>
      <div>리액트</div>
      <div>
        제목
        <input type="text" value={title} onChange={titlechange} />
        내용
        <input type="text" value={body} onChange={bodychange} />
      </div>
      <button onClick={addbtn}>추가하기</button>
      <div>
        <h2>Working</h2>
        {users
          .map((user) => {
            return (
              <div>
                {user.title}-{user.body}
                <button onClick={() => deletebtn(user.id)}>삭제하기</button>sdasddsdw
              </div>
            );
          })}
      </div>
    </div>
  );
}

export default App;

추가 기능과 삭제 기능만 있는 todolist 코드이다.

코드에 있는 state별로 redux로 구현하여 body, title, user로 만들었다. 내용, 제목, 추가, 삭제

title

const SET_TITLE = "SET_TITLE";
const RESET_TITLE = "RESET_TITLE";

const initialstate = "";

export const settitle = (e) => {
  return { type: SET_TITLE, payload: e.target.value };
};

export const resettitle = () => {
  return { type: RESET_TITLE };
};

export const reducer_title = (state = initialstate, action) => {
  switch (action.type) {
    case SET_TITLE:
      return action.payload;
    case RESET_TITLE:
      return initialstate;
    default:
      return state;
  }
};

export default reducer_title;

body

const SET_BODY = "SET_BODY";
const RESET_BODY = "RESET_BODY";

const initialstate = "";

export const setbody = (e) => {
  return { type: SET_BODY, payload: e.target.value };
};

export const resetbody = () => {
  return { type: RESET_BODY };
};
const reducer_body = (state = initialstate, action) => {
  switch (action.type) {
    case SET_BODY:
      return action.payload;
    case RESET_BODY:
      return initialstate;
    default:
      return state;
  }
};

export default reducer_body;

user

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

const initialstate = [
  {
    id: 1,
    title: "이동언",
    body: "이동언입니다.",
  },
];

export const adduser = (title, body) => {
  return { type: ADD, title, body };
};

export const deluser = (id) => {
  return { type: DELETE, id };
};

export const reducer_user = (state = initialstate, action) => {
  switch (action.type) {
    case ADD:
      const newUsers = {
        id: state.length + 1,
        title: action.title,
        body: action.body,
      };
      return [...state, newUsers];
    case DELETE:
      const delUser = state.filter((user) => user.id !== action.id);
      return delUser;
    default:
      return state;
  }
};

export default reducer_user;

각 기능들을 모듈별로 구현하였고 dispatch와 useSelector를 이용하여 app.js에 연결하였당!!

App

import { useSelector, useDispatch } from "react-redux";
import { adduser } from "./redux/modules/user";
import { deluser } from "./redux/modules/user";
import { settitle } from "./redux/modules/title";
import { setbody } from "./redux/modules/body";
import { resetbody } from "./redux/modules/body";
import { resettitle } from "./redux/modules/title";

function App() {
  const title = useSelector((store) => store.reducer_title);
  const body = useSelector((store) => store.reducer_body);
  const user = useSelector((store) => store.reducer_user);
  const dispatch = useDispatch();

  const titlechange = (e) => {
    dispatch(settitle(e));
  };

  const bodychange = (e) => {
    dispatch(setbody(e));
  };

  const addbtn = () => {
    dispatch(adduser(title, body));
    dispatch(resettitle(""));
    dispatch(resetbody(""));
  };

  const deletebtn = (id) => {
    dispatch(deluser(id));
  };

  return (
    <div className="최상단">
      <div>마이투두리스트</div>
      <div>리액트</div>
      <div>
        제목
        <input type="text" value={title} onChange={titlechange} />
        내용
        <input type="text" value={body} onChange={bodychange} />
      </div>
      <button onClick={addbtn}>추가하기</button>
      <div>
        <h2>Working</h2>
        {user.map((user) => {
          return (
            <div key={user.id}>
              {user.title}-{user.body}
              <button onClick={() => deletebtn(user.id)}>삭제하기</button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;

마무리

예전에 만들었던 todolist에 대해 기능들을 축소시켜 redux를 쉽게 구현할 수 있었다. 더욱 더 이해하기 쉬웠고, 리덕스가 어떻게 구현되는지 알게 되었다. redux를 더 공부 해봐야겠다.