항해 22일차 (reudx todo)

항해 22일차

오늘은 리액트 숙련 과제를 끝마쳤다. 그래서 오늘은 과제에 대한 복습 및 리뷰를 해볼려고 한다.

보자면

먼저 원본 코드에서

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("");
  };

  const deletebtn = (id) => {
    // 삭제 버튼 id를 받아 id가 같지 않다며 제외한 배열 생성
    const delUser = users.filter((user) => user.id !== id);
    setUser(delUser);
  };

  const completebtn = (id) => {
    // 완료 버튼 id를 받아서 해당 id의 user의 isDone을 true로 변경
    const updatedUsers = users.map((user) =>
      user.id === id ? { ...user, isDone: true} : user
    );
    setUser(updatedUsers);
  };

  const cancelbtn = (id) => {
    const updatedUsers = users.map((user) =>
      user.id === id ? { ...user, isDone: false } : user
    );
    setUser(updatedUsers);
  };

  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
          .filter((user) => user.isDone === false)
          .map((user) => {
            return (
              <div>
                {user.title}-{user.body}
                <button onClick={() => deletebtn(user.id)}>삭제하기</button>
                <button onClick={() => completebtn(user.id)}>
                  {user.isDone ? "취소하기" : "완료하기"}
                </button>
              </div>
            );
          })}
      </div>
      <div>
        <h2>Done</h2>
        {users
          .filter((user) => user.isDone === true)
          .map((user) => {
            return (
              <div>
                {user.title}-{user.body}
                <button onClick={() => deletebtn(user.id)}>삭제하기</button>
                <button onClick={() => cancelbtn(user.id)}>
                  {user.isDone ? "취소하기" : "완료하기"}
                </button>
              </div>
            );
          })}
      </div>
    </div>
  );
}

export default App;

각 state 별로 redux 모듈을 만들었다. 각각 title, body, users로 만들었다. 그 후 리덕스를 사용하여 각 기능들을 바꾸어주었다.

title

const SET_TITLE = "SET_TITLE"; // 휴먼 에러 줄일려고
const RESET_TITLE = "RESET_TITLE"; // 초기화 

const initialState = "";

export const settitle = (e) => {
  // action
  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 = (value) => {
  // e에는 다양한 값이 있음
  // action
  return { type: SET_BODY, payload: value };
};

export const resetbody = () => {
  return { type: RESET_BODY };
};

export 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;

users

import { v4 as uuidv4 } from "uuid";

const ADD_USER = "ADD_USER";
const DELETE_USER = "DELETE_USER";
const COMPLETE_USER = "COMPLETE_USER";
const CANCEL_USER = "CANCEL_USER";
const initialState = [
  { id: uuidv4(), title: "이동언", body: "나는 이동언이다.", isDone: false },
];

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

export const deleteuser = (id) => {
  return { type: DELETE_USER, payload: id };
};

export const completeuser = (id) => {
  return { type: COMPLETE_USER, payload: id };
};

export const canceluser = (id) => {
  return { type: CANCEL_USER, payload: id };
};

const reducer_user = (state = initialState, action) => {
  switch (action.type) {
    case ADD_USER:
      const newUsers = {
        id: uuidv4(),
        title: action.title,
        body: action.body,
        isDone: false,
      };

      return [...state, newUsers];

    case DELETE_USER:
      const delUser = state.filter((user) => user.id !== action.payload);
      return delUser;
    case COMPLETE_USER:
      const completeUsers = state.map((user) =>
        user.id === action.payload ? { ...user, isDone: true } : user
      );
      return completeUsers;
    case CANCEL_USER:
      const cancelUsers = state.map((user) =>
        user.id === action.payload ? { ...user, isDone: false } : user
      );
      return cancelUsers;
    default:
      return state;
  }
};

export default reducer_user;

이렇게 리덕스로 바꾸어 주고 App에서 useSelector와 useDispatch를 사용하여 리덕스로 바꾼 것들을 받아왔다.

또한 라우터를 사용하여 상세보기 버튼을 만들어 각각의 id, title, body를 보여주게 하였다.

마지막으로 header, input, item, list로 컴포넌트를 분리시켜주었다.

마무리

state들을 redux로 바꾸어주면서 편리한 점과 흐름을 알게 되었다. 하지만 아는 과정에서 이해가 안되는 부분도 많았고 힘들었다. 하지만 문제들을 잘 해쳐나가서 뿌듯하였다. 또한 body,title은 별로 사용 안하기 때문에 합치거나 리덕스로 바꾸지말고 사용해야 더욱 더 편리할 것 같다는 생각이 들었다.
🔥