24. 06. 10 TIL

베이직 과제로 투두앱을 만들었다.

 

오랜만에 하려니까 왜이렇게 헷갈리는 것?

 

심지어 강의 때 졸아가지고 (튜터님 죄송합니데이...) 기억이 잘 안 났다.

 

일단 만든 거.

 

먼저 필요한 useState를 만든다.

 

입력창, 목록창이 필요하겠지예.

const [input, setInput] = useState('');
const [todoList, setTodoList] = useState([]);

여러 개의 할 일을 저장하므로 todoList의 초기값은 빈 배열로 넣어준다.

 

이제 인풋창부터 만들어보자.

 

<div>할 일 목록</div>
      <form onSubmit={submit}>
        <input type="text" value={input} onChange={change} />
        <button type="submit">추가</button>
      </form>
      <div>

폼 태그를 써서 onSubmit을 사용했다. 그리고 value에 값을 넣고, onChange도 함수를 만들어서 넣어줌.

 

  const change = (e) => {
    setInput(e.target.value);
  };

이렇게 setInput에 입력한 값을 넣어준다. 그럼 input은 저 값이 되겠지예...

 

그럼 submit 함수 만들러 고.

 

const submit = (e) => {
    e.preventDefault();

    const newTodo = {
      todo: input,
      isDone: false,
      id: new Date().getTime(),
    };
    if (input.trim()) {
      setTodoList([...todoList, newTodo]);
      setInput('');
      return;
    }
    alert('값을 모두 입력하세요');
  };

그리고 새 객체를 만들어 주는데,

todo에는 input 값을, isDone은 false로, id는 저렇게 넣어준다.

 

그리고 조건문으로 input에 값이 있다면 setTodoList에 이전 값과 함께 newTodo를 넣어주도록 했다.

그리고 입력창을 비워줌! 그리고 리턴으로 마치게끔...

 

근데 비워진 게 있다? 바로 alert 띄워줘...

 

이제 저 todoList를 뿌려줘야 한다.

 

맵으로 돌려돌려...

{todoList.map((todo) => {
            return (
              <li
                key={todo.id}
                style={{
                  textDecoration: todo.isDone ? 'line-through' : 'none',
                }}
              >
                {todo.todo}

                <button onClick={() => done(todo.id)}>
                  {todo.isDone ? '취소' : '완료'}
                </button>

                <button onClick={() => del(todo.id)}>삭제</button>
              </li>
            );
          })}

ul 태그 안에 넣어서 맵으로 돌리면서 li와 버튼 2개를 뱉어내게 만들었다. (리턴 빼먹지말기!!!!!!!)

 

키값은 todoList의 id값을 넣어주면 되고, todo의 todo값을 보이게 만들었다.

 

그리고 버튼은 완료, 삭제 버튼인데 클릭하면 각각 id값을 인자로 보내도록 만들었다.

 

const done = (id) => {
    setTodoList(
      todoList.map((todo) =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  };

먼저 done 버튼은 id를 받아서, todoList로 맵을 돌리는데, 클릭한 id와 todoList 전체의 id를 비교해서

참이면 기본 목록에 isDone을 반전시키고, 거짓이면 todo만 그대로 내보내는 것으로 만들었다. 

그리고 이걸 setTodoList에 넣어 todoList 업데이트!

 

 const del = (id) => {
    setTodoList(
      todoList.filter((todo) => {
        return todo.id !== id;
      })
    );
  };

del 버튼도 마찬가지로 id를 받아서 todoList로 필터를 먼저 돌린다. 

필터는 조건에 맞는 것들을 모아 새로운 배열을 만드는데,

 

todo.id와 클릭한 id가 일치하지 않는 것을 새로운 배열에 모아서 내보낸다.

그러면 클릭한 요소가 todo.id랑 일치하면 삭제된 것처럼 보이게 하는 것.