All files / src/chap07 RecoilTodo.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useRecoilState, useRecoilValue } from 'recoil';
import { useState } from 'react';
import { todoAtom, todoLastIdSelector } from '../store/atom';
import '../chap04/StateTodo.css';
 
export default function RecoilTodo() {
  const [title, setTitle] = useState('');
  // 할 일 목록, 최대 id 값은 각각 Recoil에서 가져온다.
  const [todo, setTodo] = useRecoilState(todoAtom);
  const maxId = useRecoilValue(todoLastIdSelector);
 
  const handleChangeTitle = e => setTitle(e.target.value);
  // [추가] 버튼으로 할 일 항목 추가하기
  const handleAdd = () => {
    setTodo([
      ...todo,
      {
        id: maxId + 1,
        title,
        isDone: false
      }
    ]);
  };
  // [완료] 버튼으로 할 일 항목을 작업 완료로 표시
  const handleDone = e => {
    setTodo(todo.map(item => {
      if (item.id === Number(e.target.dataset.id)) {
        return {
          ...item,
          isDone: true
        };
      } else {
        return item;
      }
    }));
  };
  // [삭제] 버튼으로 할 일 항목 삭제하기
  const handleRemove = e => {
    setTodo(todo.filter(item =>
      item.id !== Number(e.target.dataset.id)
    ));
  };
 
  return (
    <div>
      <label>
        할 일:
        <input type="text" name="todo"
          value={title} onChange={handleChangeTitle} />
      </label>
      <button type="button"
        onClick={handleAdd}>추가하기</button>
      <hr />
      <ul>
        {/* 할 일 목록을 순서대로 출력 */}
        {todo.map(item => (
          <li key={item.id}
            className={item.isDone ? 'done' : ''}>
            {item.title}
            <button type="button"
              onClick={handleDone} data-id={item.id}>완료
            </button>
            <button type="button"
              onClick={handleRemove} data-id={item.id}>삭제
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}