[TIL] Day 27 React로 TodoList 만들기 3

2023.11.10 금

 

ver 4

 

지난 시간에 이어서 마무리를 해보자.

Working 구역과 Done 구역에 카드를 만들어보자.

 

 

Todolist.jsx 작성하기

App.jsx

import './App.css';
import React, { useState } from 'react';
import Input from './Components/Input';
import Todolist from './Components/Todolist';

function App() {
  const [todos, setTodos] = useState([]);

  return (
    <div className='outline'>
      <div className='app_box'>
        <header>
          <Input
            todos={todos}
            setTodos={setTodos}
          />
        </header>
        <footer>
          <Todolist
            todos={todos}
            setTodos={setTodos}
            doneList={false}
          />
          <Todolist
            todos={todos}
            setTodos={setTodos}
            doneList={true}
          />
        </footer>
      </div>
    </div>
  );
}

export default App;

footer 부분에 Todolist 컴포넌트를 작성해 준다.

내려야 할 props를 설정한다.

 

 

Todolist.jsx

import React from 'react'

const Todolist = (props) => {
  const { todos, setTodos, doneLiist } = props;

  const deleteBtn = (todo) => {
    setTodos(todos.filter(item => {
      return item.id !== todo.id
    }))
  }

  const doneBtn = (todo) => {
    setTodos(todos.map(item => {
      if (item.id === todo.id) {
        return { ...item, isDone: !item.isDone }
      } else {
        return item
      }
    }))
  }

  return (
    <>
      <div>
        <div className='card_top'></div>
        <h2 >{doneLiist ? "Done..! 🎉" : "Working.. 🔥"}</h2>
        <div className="card_box">
          {todos.filter(item => {
            return item.isDone === doneLiist
          }).map(todo => {
            return (
              <div className="card" key={todo.id}>
                <h2>{todo.title}</h2>
                <p>{todo.contents}</p>
                <div className='card_btn_box'>
                  <button className='delete_btn' onClick={() => deleteBtn(todo)}>삭제하기</button>
                  <button className='complete_btn' onClick={() => doneBtn(todo)}>{doneLiist ? "수정" : "완료"}</button>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </>
  )
}

export default Todolist

초기 설정

빈 화면에서 rfce를 통해서 기본 양식을 불러온다.

 

props 선언

props를 받아서 내부에서 편하게 쓸 수 있게 선언해 준다.

 

jsx 작성

return 안쪽에 필요한 태그를 작성한다.

Working, Done 타이틀이 될 곳을 h2로 작성해 준다.

card_box와 card 안쪽에 나타낼 요소를 작성해 준다.

 

Working or Done

props로 내려준 doneList의 값에 따라 h2 요소에 입력값이 바뀌도록 삼항연산자를 통해서 설정해 준다.

 

Card Box and Card

todos를 filter하여 isDone과 doneList의 값이 일치하는 것이 나오도록 설정한다.

이후 map을 통해서 card를 출력한다.

map을 돌릴 때는 key값을 부여해야 콘솔창에 오류가 발생하는 것을 막을 수 있다.

고윳값인 id값을 활용하자!

return 안쪽에 나타내고자 하는 형태를 작성한다.

 

Delete Btn (삭제하기 버튼)

삭제하기 버튼을 만들어보자.

onClick에 적용할 함수를 위쪽에 따로 만들어준다.

여기서 인수는 map에서 매개변수로 입력한 todo를 적용시켜 준다.

 

todos에 filter를 해준다.

todos id와 todo id를 비교하여 일치하지 않은 부분만 나타나도록 하면 원하는 값만 삭제한 것처럼 표현된다.

이를 setTodos로 state를 변경해 준다.

 

Done Btn (완료 or 수정 버튼)

수정, 입력이라는 텍스트가 doneList 값에 의해서 변경되도록 삼항연산자를 활용해서 작성한다.

 

이 역시 onClick에 적용할 함수를 위쪽에 따로 만들어준다.

여기서도 인수는 map에서 매개변수로 입력한 todo를 적용시켜 준다.

 

todos에 map을 통해서 todos id와 todo id를 비교한다.

일치한다면 기존 todos에 isDone값을 반대로 변경하고,

일치하지 않는 값은 todos 값을 그대로 출력한다.

이를 setTodos로 state를 변경해 준다.

 

 

 

---

하루를 마치며

드디어 TodoList를 완성했고, 리팩터링까지 마쳤다!

아직 추가하고 싶은 부분이 많다.

이 글을 작성하면서도 ver5를 작성 중이다.

하나의 프로젝트를 완성시킨 후 계속해서 디벨롭하는 과정도 많은 공부가 되는 것 같다.

 

 

오늘의 한 줄
TodoList
TodoList 완성하기