개인과제 (todolist 만들기 2)

 

90프로는 완성을 했습니다. 

 

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

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

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

어제는 const [doneList, setDoneList] = useState([]); 가 있었지만 

작업하다보니 불필요한 수준을 넘어서 오히려 방해가 되서 지웠습니다.

완료하기,취소하기 버튼

const clickSetButtonHandler = (id) => {

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

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

  );

  setTodoList(updatedTodoList);

};

 

추가할때 isDone : false를 뒀고 

버튼을 누를때 누른 id의 값이 버튼쪽의 id와 같다면, isDone의 상태가 true 혹은 false로 바뀌게끔, 짰습니다.

처음엔 그냥 if 문만을 써서 했는데 에러가 계속 뜨는게 확인됐고, 삼항연산자를 써서 고치니까 제대로 동작 됐습니다.  

그리고 setTodoList를 통해 map으로 복제된 데이터를 렌더링하게끔 했습니다. 
이 버튼을 누르면 isDone 의 상태가 바뀐다면 isDone의 상태에 따라 복제된 배열이  Working...에 나타나거나

Done...에 나타나게끔 했습니다

 return !item.isDone ? (

          <BoxContents

          key={item.id}

          item={item}

          clickRemoveButtonHandler={clickRemoveButtonHandler}

          clickSetButtonHandler={clickSetButtonHandler} />

        ): null

return item.isDone ?(

       <BoxContents

       key={item.id}

       item={item}

       clickRemoveButtonHandler={clickRemoveButtonHandler}

       clickSetButtonHandler={clickSetButtonHandler} />

        ):null

 

컴포넌트를 따로 분리시켜놨지만 핵심은 

return 뒤에 !(논리부정연산자)가 있고 없고 입니다.

item.isDone이 true이거나 false일때 삼항연산자를 통해 각기 다른위치에 나타나게끔 했고, 

완료, 취소 버튼 역시 

 {item.isDone ? "취소": "완료"}

이런식으로 isDone이 true이거나 false 일때 각기 다른 값을 나타내게끔 했습니다.