ToDolist하면서 코드 이해하기

const handleCheckClick = (itemId) => {
  setCheckedItems((prevState) => ({
    ...prevState,
    [itemId]: !prevState[itemId],
  }));
};

...prevState는 이전 상태 객체의 모든 속성을 새로운 객체에 복사한다.

그리고 그 뒤에 [itemId]: !prevState[itemId]를 추가하여, 해당 itemId의 속성 값만 새로운 값으로 변경한다.

이전 상태 객체의 모든 속성을 복사하고, 그 중에서도 itemId의 속성 값만 변경하는 이유는, 다른 항목의 체크 여부는 변경되지 않고, 현재 클릭한 항목의 체크 여부만 변경되기 때문이다.

즉, 이전 상태 객체를 복사하여 새로운 상태 객체를 만들어 업데이트하면, 현재 클릭한 항목의 체크 여부를 변경하면서, 다른 항목들의 상태는 그대로 유지된다. 따라서, ...prevState는 이전 상태 객체의 다른 속성들을 그대로 유지하면서, 해당 항목의 속성 값만 변경하는 역할을 한다.

 

useEffect(() => {
const localStorageCheckedItems = localStorage.getItem("checkedItems");
if (localStorageCheckedItems) { setCheckedItems(JSON.parse(localStorageCheckedItems));
} }, []); 

useEffect(() => {
localStorage.setItem("checkedItems", JSON.stringify(checkedItems)); 
}, [checkedItems]);

위 코드는 useEffect() Hook을 이용하여 브라우저의 로컬 스토리지를 이용하여 checkedItems 상태를 저장하고 유지하는 방법을 구현한 코드이다.

 

useEffect() Hook은 컴포넌트가 렌더링 될 때마다 실행되는데,

첫 번째 useEffect()는 컴포넌트가 처음 마운트되었을 때에만 실행된다.

이 코드에서는 이 Hook을 이용하여 이전에 저장된 checkedItems 상태가 있는지를 확인하고,

있다면 로컬 스토리지에서 해당 상태를 불러와 setCheckedItems() 함수를 이용하여 해당 상태를 설정한다.

 

두 번째 useEffect() Hook은 checkedItems 상태가 업데이트될 때마다 실행된다.

이 코드에서는 이 Hook을 이용하여 checkedItems 상태가 업데이트될 때마다 해당 상태를 로컬 스토리지에 저장한다.

즉, 위 코드는 브라우저의 로컬 스토리지를 이용하여 checkedItems 상태를 저장하고 유지함으로써,

컴포넌트가 다시 렌더링되거나 페이지가 새로고침되더라도 checkedItems 상태가 유지되도록 구현한 코드이다.

 

오류 해결

<button onClick={handleDeleteClick}>delete</button>

<button onClick={() => handleDeleteClick(list.id)}>delete</button>

const handleDeleteClick = (id) => {


    fetch(`http://localhost:3001/lists/${id}`, {
      method: "DELETE",
    })
      .then(() => {
        navigate("/");
        navigate(0);
      })
      .catch((error) => {
        console.error("Error", error);
      });
  };