개인과제 (todolist 만들기 3)

 

꼬였던 부분 정리. 

const clickSetButtonHandler = (id) => {

  const updatedTodoList = todoList.map((item) =>

  item.id === id ? { ...item, isDone: !item.isDone } : item

  );

  setTodoList(updatedTodoList);

};

 

가장 문제가 된 완료/취소 버튼.

처음엔 완료와 취소 버튼을 따로 만들고, 

완료를 누르면 

Working에서 Done으로 옮길 생각으로 만들었다. 

그러다보니 

  const [header, setHeader] = useState("");

  const [contents, setContents] = useState("");

  const [todoList, setTodoList]= useState([]);

여기에도 const [doneList, setDoneList]=useState([]); 를 따로 만들고 코드를 짜고 있었는데, 개인과제 페이지를 다시보니

isDone 상태를 따로 두어 false일땐 완료버튼이, true일땐 취소버튼이 되게끔, 즉 동적으로 바뀌는거였다.

 

그래서 완료/취소 버튼을 새로만들었어야했고, 삭제버튼도 다른방법으로 했어야했는데 처음 할려고 했던거 처럼 

const [doneList, setDoneList]=useState([]); 이게 있으니까 뭘 해도 이상하고 꼬인다 라는 느낌이 들었었다.
저게 문제라고는 생각을 했는데  개발자 공부를 한지 한달쫌 넘은 시점에서 방향은 맞았는데 잘 못하고 있는건지, 아니면 방향부터 틀린건지 잘 몰랐어서 혼자 고민하다가 도저히 안돼겠어서 튜터님에게 조언을 구하니, useState는 되도록 적게 쓰는게 좋다. 없는 방향이 더 맞는거 같다 라고 하셔서 그 후론 꼬인 실타래 풀린것마냥 
처음 올린 코드처럼 완료/취소 버튼을 눌렀을때 버튼을 누른 id값과 카드 id 값이 같으면 isDone의 값을 반대로 바꾸게끔. 

      <div>

        <div className="working">Working...</div>

      <div className="workingBox">

      {todoList.map((item)=>{

        return !item.isDone ? (

          <BoxContents

          key={item.id}

          item={item}

          clickRemoveButtonHandler={clickRemoveButtonHandler}

          clickSetButtonHandler={clickSetButtonHandler} />

        ): null

      })}

      </div>

      </div>

      <div className="done">Done!!!</div>

      <div className="doneBox">    

       {todoList.map((item)=>{

        return item.isDone ?(

       <BoxContents

       key={item.id}

       item={item}

       clickRemoveButtonHandler={clickRemoveButtonHandler}

       clickSetButtonHandler={clickSetButtonHandler} />

        ):null

      })

      }

      </div>

그러면 이 코드에 맞게 isDone값에 따라 둘중 Working 또는 Done 밑에 카드가 표시된다. 

추가로 수정한 부분은 return 뒤 삼항연산자를 쓴 부분인데, 이 부분은 원래 &&연산자를 써서 표현했었지만, 

강의 도중 삼항연산자로 표현하는게 에러가 덜 난다 라는 말을 듣고 수정했다.