[프로젝트][에러] 리코일 저장값의 초기화

 

문제상황:  상세보기 페이지에서 작성자가 수정버튼을 누르면 상세정보의 내용을 가지고 게시글 수정페이지로 가야한다.

그러기위해  id값이 필요하다. 수정페이지에서 다시 도서상세보기 axios 요청을 보내서 이전에 가지고있던 값을 가져와야한다.

이전에 가지고있던 값을 알아야 아래와같이 게시글수정페이지에 들어갔을때 내가 입력했던 정보를 불러올수있다. 

 

 

But 으아아아아아아

id값을 분명 리코일에 저장했기에 수정페이지를 거쳐서 들어가면 정보를 잘 get해오지만..

새로고침을 하는 순간? 리코일이 초기값인 0으로 get요청을 보내서 엉뚱한 정보를 가져온다거나, 삭제된 컨텐츠여서 아예 값을 못가져온다. 

원인 : 리코일이 영구저장하지못하는 문제점이다. 

 

해결:  localstorage에 저장을 해주는 방법으로 해결해야줬다.

//states.ts
export const storeContentId = atom<number | null>({
  key: "id",
  default: null,
});

//Detail.tsx

//디테일페이지에서 수정버튼 누르면 handleClickModify가 실행
//이떄 Id를 리코일에도 담고, localstorage에 담아준다

  const handleClickModify = () => {
    storeId(Number(id));
    localStorage.setItem("modify_id", String(id));
    navigate("/modify");
  };
  
  //Modify.tsx
  
  //UseEffect사용시에 받아온 id를 fetchID에 할당해주고 만약에 수정버튼을 거쳐서 들어갔는데 새로고침을 하면 null인 초기값이되버리니
  //그때는 localstorage에서 id를 꺼내먹도록 만든다.
  
  //다시 다른곳을 클릭했다가 modify로 들어가보면 아무값도없어야된다. 이것을 구현하기위해서는
  //localstorage값을 useEffect의 랜더링이 스탑된다면 없어지도록 해준다. (useEffect의 return속성을 이용한다.)
  
    useEffect(() => {
    let fetchID = id;
    if (fetchID === null) {
      fetchID = Number(localStorage.getItem("modify_id"));
    }
    getSingleData(fetchID);
    return () => {
      localStorage.removeItem("modify_id");
    };
  }, []);