[ 스파르타 / TIL ] 내일배움캠프 #28 [Todo list 만들기 (React)]

오늘 한 것

---

• 알고리즘 문제 풀기
• Todo list Vercel에 배포하기
• 튜터님의 Todo list 리뷰

 

 

노트 정리

---

[ 프로그래머스 / Javascript ] 하샤드 수

 

 

Todo list 회고

---

Todo list 만든 결과물이다. 

 

 

Todo list를 만들면서 가장 어려웠던 부분은 Working에서 완료를 눌렀을 경우, Done으로 Todo가 이동을 하는 것이다. 하지만 true로 변경이 된 상태에서 map으로 todos 배열을 하나씩 체크하면서 if (isDone == false) 이면 Work에 출력되게, if (isDone == true)이면 Done에 출력되게끔 설정을 해주었다. 실제로 코드를 실행하면 Work에서는 완료가 된 todo는 출력이 되지 않았지만 그렇다고 Done에 뜨지도 않았다.

 

아래 코드는 완료 버튼이 눌러지면 실행 되는 코드이다. 이때 isDone의 상태가 false이면 true로 true면 false로 변경시킨다.

// 완료 버튼이 onClick되면 실행되는 부분
const handleComplete = (todo) => {
    setTodos(
      todos.map((item) => {
        if (item.id === todo.id) {
          return {...item, isDone: !item.isDone};
        }
        return item;
      })
    );

 

이렇게 해주고 map에서 if 문을 사용해보았지만 되지 않았다 그래서 아래와 같이 수정을 하니까 완료를 눌렀을때 isDone에 제대로 출력되었다. 

 

아래와 같이 리스트를 출력할 부분에서 checkDone 함수에 todos 리스트와 boolean 값을 포함 시켰다.

return (
    <div className='list-container'>
      <h2 className='list-title'>Working..🔥</h2>
      <div className='list-wrapper'>{checkDone(todos, false)}</div>
      <h2 className='list-title'>Done..!🎉</h2>
      <div className='list-wrapper'>{checkDone(todos, true)}</div>
    </div>
  );

 

그래서 checkDone에서 trueOrFalse에 따라 필요한 값들을 resultDone 배열에 추가해준 뒤에 배열을 return 하게 해주었다.

// Todos와 Work는 false값을 받아오고 Done은 true값을 받아온다.
  // trueOrFalse의 상태에 따라 isDone을 확인해서 resultDone에 추가하여 배열을 return한다.
  const checkDone = (todos, trueOrFalse) => {
    let resultDone = [];
    for (let todo of todos) {
      if (todo.isDone === trueOrFalse) {
        resultDone.push(
          <div className='todo-container' key={todo.id}>
            <h2 className='todo-title'>{todo.title}</h2>
            <div className='todo-context'>{todo.context}</div>
            <div className='buttons'>
              <button className='button-delete button' onClick={() => handleDelete(todo)}>
                삭제하기
              </button>
              <button className='button-complete button' onClick={() => handleComplete(todo)}>
                {trueOrFalse ? '취소' : '완료'}
              </button>
            </div>
          </div>
        );
      }
    }
    return resultDone;
  };