리액트로 todo list 만들기 2

그 다음엔 먼저 TodoList로 분리하고, TodoList 내에서 중복되는 코드가 있어서

Todo로 분리했다.

 

일단 다 나눠버려서 TodoList는 이미 나눠진 코드다.

 

허헛

 

const TodoList = ({ todos, onDelete, moveDone }) => {
  return (
    <div className="todoList">
      <div className="working">
        <h2>Working🏃‍♀️</h2>

        {todos.map((todo) => {
          if (todo.isDone === false) {
            return (
              <Todo
                key={todo.id}
                todo={todo}
                onDelete={onDelete}
                moveDone={moveDone}
              />
            );
          }
        })}
      </div>

일단 todos, onDelete, moveDone을 가져와서

차례대로 넣어준다.

 

그리고 working에서 map을 돌리는데

todos (할 일 목록)에서 각 요소 todo가 isDone이 false (기본값)인 것만

working에 나오도록 뿌려준다.

 

done은 반대로 isDone을 true로 바꿔주면 된다.

 

그리고 TodoList 첫 부분에 

import Todo from './Todo';

또 Todo를 분리해서 받아오도록 했는데,

 

const Todo = ({ todo, onDelete, moveDone }) => {
  return (
    <div className="workingTodo" key={todo.id}>
      <h3>{todo.title}</h3>
      <p>{todo.contents}</p>
      <div className="workingBtn">
        <button
          className="deleteBtn"
          onClick={() => {
            onDelete(todo.id);
          }}
        >
          삭제
        </button>
        <button className="doneBtn" onClick={() => moveDone(todo.id)}>
          미완료 ↔️ 완료
        </button>
      </div>
    </div>
  );
};

 

이 Todo에는 이렇게 작성하는데,

isDone이 각각 false와 true로 다르므로...

 

그리고 삭제 버튼, done & working 으로 이동시켜주는 버튼도 넣어준다.

그럼 그걸 받아서 TodoList에서 뿌려주는 것.

 

간단하게 정리하자면, 이름대로 TodoList는 todo 목록을 관리하고,

todo는 개별 todo를 말한다.

 

TodoList는 카드 목록이 쫘악 뜨고

Todo는 각 todo 카드를 관리하는 거라 보면 될 듯 싶다.