2023.02.27) 항해 22일차

오늘은 리액트로 투두리스트를 만들어 보았다.

투두 리스트 추가와 삭제는 강의 내용을 토대로 만들면 어렵지 않게 만들 수 있었다.

하지만 완료 버튼을 누르면 투두가 완료 자리에 가도록 하는게 어려웠다...

 

완료 자리에 갈 수 있도록 투두에 ' isDone: false '를 기본값으로 주고,

완료 버튼을 클릭하면 false가 true로 바뀌고, 완료 자리로 가도록 하려고 하였다.

그렇게 하기 위해서 map에 if문을 사용하여 바뀌도록 하였다.

생각은 했지만 뭔가 변하는게 없어보여서 혼란스러웠다.

그래서 결국 도움을 받아 조금씩 코드를 작성해 갔다.

적용이 잘 되었지만, 구역을 나누는 기준이 작성되어있지 않았다.

  //투두 완료
  const clickDoneBoxHandler = (id) => {
    const newTodos = todos.map((todo)=>{
      if(todo.id === id){
        todo.isDone = true;
      }
      return todo;
    });
    setTodos(newTodos);
  }

그래서 진행중인 구역에는 false인 투두만 들어오고,

완료인 구역에는 true인 투두가 들어오도록 하였다.

// 진행중인 구역
<div className='working'>
          {todos.filter ((item) => item.isDone === false)
          .map(function (item) {
            return ...
            
// 완료 구역
<div className='done'>
        {todos.filter ((item) => item.isDone === true)
          .map(function (item) {
            return ...

이렇게 하자 바뀌는 값에 따라 투두가 잘 들어갔다!!

추가로 완료 버튼을 누르면 완료구역으로 넘어가고 완료 버튼이 취소 버튼이 되게 만든 다음,

취소 버튼을 누르면 다시 false로 바뀌게 하여 진행중인 구역으로 들어가도록 하였다.

 

 

 

완성된 화면

추가로 스타일링도 하고 원하는 폰트도 찾아서 적용시켜 보았다!!

아직은 매우매우 심플하게 생겼지만...

실력을 더 갈고 닦다보면 엄청난 투두를 만들 수 있을거라 기대한다 :)

 

그런의미로 다시 한번 투두리스트를 만들어보려고 한다!