[React] 리액트 기초 todo리스트 만들기

컴포넌트 분리X, 정리 안된 버전

import React, { useState } from 'react';
import './App.css';
function Todo(props) {
  return (
    <div>
      <div>{props.title}</div>
      <div>{props.contents}</div>
      <button onClick={() => props.handleDelete(props)}>삭제하기</button>
      <button onClick={() => props.handleDone(props.todo)}>완료하기</button>
    </div>
  );
}

function DoneTodo(props) {
  return (
    <div>
      <div>{props.title}</div>
      <div>{props.contents}</div>
      <button onClick={() => props.handleDelete(props)}>삭제하기</button>
      <button onClick={() => props.handleDoneCancel(props.doneTodo)}>
        취소
      </button>
    </div>
  );
}

function App() {
  const [todo, setTodo] = useState([
    {
      id: 1,
      title: 'todotest',
      contents: '리액트기초를 공부해봅시다.',
    },
    {
      id: 2,
      title: 'todotest222',
      contents: '리액트기초를 공부해봅시다.',
    },
  ]);

  const [doneTodo, setDoneTodo] = useState([]);
  const [title, setTitle] = useState('');
  const [contents, setContents] = useState('');
  const addTodoHandler = () => {
    const newTodo = {
      id: todo.length + 1,
      title: title,
      contents: contents,
    };
    setTodo([...todo, newTodo]);
  };

  const deleteTodoHandler = (id) => {
    console.log(id);
    // setTodo(todo.filter((todo) => todo.id !== id));
  };
  const doneTodoHandler = (dt) => {
    const newDoneTodo = {
      id: dt.id,
      title: dt.title,
      contents: dt.contents,
    };
    setDoneTodo([...doneTodo, newDoneTodo]);
    setTodo(todo.filter((t) => t.id !== dt.id));
  };

  const doneCancelHandler = (t) => {
    const newTodo = {
      id: t.id,
      title: t.title,
      contents: t.contents,
    };
    setTodo([...todo, newTodo]);
    setDoneTodo(doneTodo.filter((dt) => t.id !== dt.id));
  };
  return (
    <div>
      <p>
        제목
        <input value={title} onChange={(e) => setTitle(e.target.value)}></input>
        내용
        <input
          value={contents}
          onChange={(e) => setContents(e.target.value)}
        ></input>
        <button onClick={addTodoHandler}> 추가하기 </button>
      </p>
      <p style={{ display: 'flex' }}>
        {todo.map((todo) => {
          return (
            <Todo
              todo={todo}
              title={todo.title}
              key={todo.id}
              contents={todo.contents}
              handleDelete={deleteTodoHandler}
              handleDone={doneTodoHandler}
            />
          );
        })}
      </p>
      <p>
        {doneTodo.map((doneTodo) => {
          return (
            <DoneTodo
              doneTodo={doneTodo}
              title={doneTodo.title}
              key={doneTodo.id}
              contents={doneTodo.contents}
              handleDelete={deleteTodoHandler}
              handleDoneCancel={doneCancelHandler}
            />
          );
        })}
      </p>
    </div>
  );
}

export default App;

결과화면

 

이 코드의 문제점

키값을 todo.length+1로 설정하고있어서 todo 하나를 완료하고 다른 todo를 추가하면 키값이 겹쳐버린다.

키값을 Date.now()값으로 하는게 좋을 것 같다.

 

컴포넌트 분리

1. 버튼

2. 상자