All files / src/chap07 RecoilTodoUp.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 } from 'recoil';
import { useState } from 'react';
import { idsAtom, todoListSelector } from '../store/atomUp';
import '../chap04/StateTodo.css';
 
export default function RecoilTodoUp() {
  const [title, setTitle] = useState('');
  // Atom/Selector에서 값, 세터를 가져온다.
  const [todo, setTodo] = useRecoilState(todoListSelector);
  const [ids, setIds] = useRecoilState(idsAtom);
 
  // 텍스트 상자에 입력한 내용을 State에 반영
  const handleChangeTitle = e => {setTitle(e.target.value)};
 
  // [추가] 버튼 클릭으로 할 일 항목 추가하기
  const handleAdd = () => {
    // id군의 최대값에서 다음 id값(+1)을 가져온다.
    const newId = Math.max(...(ids.length ? ids : [0])) + 1;
    setTodo({
      type: 'add',
      newItem: {
        id: newId,
        title,
        isDone: false
      }
    });
  };
 
  // [완료] 버튼 클릭으로 해당 ToDo 항목을 작업 완료로 표시
  const handleDone = e => {
    setTodo({
      type: 'done',
      id: Number(e.target.dataset.id)
    });
  };
 
  // [삭제] 버튼 클릭으로 해당 Todo 항목 삭제하기
  const handleRemove = e => {
    setTodo({
      type: 'remove',
      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>
  );
}