React + Recoil에서 페이지 이동 중 로컬스토리지 비동기 처리

Question

react와 recoil을 사용하여 로그인기능을 만들고있습니다.시도해보니 recoil은 컴포넌트가 변경되면 값이 날아가서 로그인 단계에서는 로컬스토리지를 이용해야 할것같았습니다.그래서 jwt와 user값을 로그인 성공시 로컬스토리지에 넣고 페이지를 이동 후 다시 상수에 넣어서 사용하려고 합니다.그런데 로컬스토리지에 값이 생성, 갱신 되기전에 먼저 값을 읽어서 새로고침을 해줘야 제가 원하던 동작을 하고있습니다.로컬스토리지와 비동기, 리코일 등을 키워드로 구글링을 해보았는데 해결방법을 찾기 힘들어 혹시 선배님들께 도움을 구할수 있을까싶어 질문글 올립니다.조언 부탁드립니다. 깃헙 주소 : https://github.com/chjeong23134/sns-front 아래 코드설명 : import { atom } from "recoil"; import { UserType } from "../apis/userApi"; export const userState = atom({ key: "userState", default: JSON.parse(localStorage.getItem("user") || '{}') }); export const jwtState = atom({ key: "jwtState", default: localStorage.getItem("jwt") || '' }) export const roomIdState = atom({ key: "roomIdState", default: null })아톰 모음 const history = useNavigate(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); function signInHandler(): void { signIn(email, password).then((res) => { localStorage.setItem("user", JSON.stringify(res.user)); localStorage.setItem("jwt", res.accessJwt); history("/main/list"); }); }로그인 후 로컬스토리지 셋, 페이지 이동 const user = useRecoilValue(userState); const jwt = useRecoilValue(jwtState); const [rooms, setRooms] = useState([]); useEffect(() => { roomList(jwt, user.id).then((res) => setRooms(res)); });아톰의 디폴트값으로 로컬스토리지에서 값을 꺼내옴

나니야 · Answer

export const userState &#61; atom<UserType>({ key: &#34;userState&#34;, default: JSON.parse(localStorage.getItem(&#34;user&#34;) || '{}') }); 에서 default에 JSON.parse를 넣는 발상은 굉장히 신선하네요.atom의 effect를 보시면 되겠습니다.default값에는 값이 들어가야지 로직이 들어가면 안됩니다.안된다고 한적은 없으나, 최소한 저로써는 상상못한 코드네요.초기값만 넣으세요

세브라이드 · Answer

recoil은 컴포넌트가 변경되면 값이 날아가서날아간다면 RecoilRoot를 잘못 선언했거나 사용을 잘못하고 있거나...둘 중 하나로 보입니다. ~.~

푸기 · Answer

// 나니야댓글감사합니다디폴트에 값을 넣으려한게 문제가 될 수 있겠네요디폴트는 빈json 넣고 다시 작성하겠습니다감사합니다 // 세브라이드댓글 감사합니다일단 리코일루트는 최상단인 index에 설정해 두었습니다이유를 잘 모르겠지만 app컨포넌트 안에서 signin컴포넌트와 main컴포넌트의 변경과정에서 signin에서 설정한 값이 main으로 넘어가며 사라지더군요부모인 app에서 선언하면 자식인 main에서 살아있겠지만 구조상 형제 컴포넌트로 변경이되면 값이 날아가 구조를 어떻게 해야할지 잘 모르겠습니다저와 비슷한 경험을 하고있는 분들도 스택오버플로우에서 몇개의 게시글 확인했지만 답글이 하나도없었고 국내 블로그에서 해결방법이 없는것같다 라는 글을 보고 그렇게 생각했습니다다시한번 확인해보겠습니다 감사합니다

푸기 · Answer

//세브라이드선배님 말씀듣고 다시 확인해보니 동작합니다..분명 기억상 똑같은 코드인데 제가 뭔가 잘못했던거같습니다기존 코드라도 남겨둘껄 뭐가 다른지 비교를 못하니 다음에도 같은 실수를 반복할까 두렵네요더 나은 로직으로 작성했습니다 조언의 말씀 감사드립니다

React + Recoil에서 페이지 이동 중 로컬스토리지 비동기 처리

4개의 답변

#recoil 목록