React removeCookie 질문

Question

상황)oauth로그인 시 cookie로 특정 데이터(ex.refreshToken)를 응답 받고 있습니다.쿠키에서 해당 값을 꺼내 recoil 내 저장하고, 응답 받았던 쿠키들을 전부 제거하려 합니다.문제)이 때, useEffect훅을 통하여 구현하려 하였으며 useEffect return문을 통하여(컴포넌트 언마운트 시) 쿠키 제거하려 하였으나쿠키가 정상적으로 제거되지 않더라구요.. 제가 실수한 부분이 있을까요??import { useEffect } from "react"; import { useRecoilState } from "recoil"; import { AuthUserInfoAtom } from "../../../../atoms/AuthUserInfo"; import { useCookies } from "react-cookie"; function OauthLoginSuccess(){ ... const [authUserInfo,setAuthUserInfo] = useRecoilState(AuthUserInfoAtom); const [cookie,,removeCookie] = useCookies(["refreshToken", "userNo", "userId"]); useEffect(()=>{ .. console.log("OauthLoginSuccess 마운트"); const refreshToken = cookie.refreshToken; const userNo = cookie.userNo; const userId = cookie.userId; setAuthUserInfo({ accessToken: accessToken || "", refreshToken:refreshToken || "", userId:userId || "", userNo: Number.parseInt(userNo|| "0") }); navigate("/"); return () =>{ console.log("OauthLoginSuccess 언마운트"); //정상적으로 로그는 찍힘 if(cookie){ console.log("cookie!!"); //정상적으로 로그는 찍힘 //삭제가 정상적으로 이루어지지 않음.... removeCookie("userNo"); removeCookie("userId"); removeCookie("refreshToken"); } } },[]); return ( <>

OauthLoginSuccess

) }

kenu,전독시 · Answer

보여주신 코드 스니펫은 Recoil을 사용하여 상태 관리를 하고, react-cookie를 사용하여 쿠키를 처리하는 React 컴포넌트입니다. 이 컴포넌트는 OAuth를 통한 로그인이 성공했을 때 사용자의 인증 정보를 Recoil 상태에 업데이트하고, 그 다음 홈 페이지로 이동하는 것을 처리합니다. 또한, 컴포넌트가 언마운트될 때 특정 쿠키를 제거하려고 시도합니다.그러나 쿠키가 예상대로 제거되지 않는다는 문제가 있습니다. 이는 removeCookie 함수의 사용 방식이나 쿠키 이름 등 여러 가지 이유로 발생할 수 있습니다. 잠재적인 문제와 개선 사항을 살펴보겠습니다:쿠키 이름 확인: 쿠키를 제거하려고 할 때 사용하는 쿠키 이름이 쿠키를 설정할 때 사용한 이름과 정확히 일치하는지 확인해야 합니다. 쿠키 이름은 대소문자를 구분합니다.removeCookie 사용 방법 확인: react-cookie의 removeCookie 함수는 쿠키 이름과 선택적으로 쿠키가 설정된 경로와 도메인을 요구합니다. 쿠키가 특정 경로 또는 도메인에서 설정된 경우, 제거할 때 해당 정보를 지정해야 합니다.비동기 작업 확인: 쿠키를 설정하거나 제거하는 데 비동기 작업이 있는 경우, 이를 올바르게 처리해야 합니다. 그러나 여기서는 제거가 동기적으로 작동해야 하며, 예상대로 작동해야 합니다.디버깅: 제거 과정을 디버깅하기 위해 더 많은 console.log 문을 추가할 수 있습니다. 이는 쿠키가 올바르게 액세스되고 제거 함수가 호출되는지 확인하는 데 도움이 될 수 있습니다.위 코드에 디버깅 문장을 추가하고, 쿠키가 기본 옵션으로 설정되었다고 가정하여 개선된 버전을 제공하겠습니다:import { useEffect } from "react"; import { useRecoilState } from "recoil"; import { AuthUserInfoAtom } from "../../../../atoms/AuthUserInfo"; import { useCookies } from "react-cookie"; function OauthLoginSuccess() { const [authUserInfo, setAuthUserInfo] = useRecoilState(AuthUserInfoAtom); const [cookie, , removeCookie] = useCookies(["refreshToken", "userNo", "userId"]); useEffect(() => { console.log("OauthLoginSuccess 마운트"); const refreshToken = cookie.refreshToken; const userNo = cookie.userNo; const userId = cookie.userId; setAuthUserInfo({ accessToken: accessToken || "", refreshToken: refreshToken || "", userId: userId || "", userNo: Number.parseInt(userNo || "0"), }); navigate("/"); return () => { console.log("OauthLoginSuccess 언마운트"); if (cookie) { console.log("쿠키 제거 중..."); removeCookie("userNo", { path: '/' }); removeCookie("userId", { path: '/' }); removeCookie("refreshToken", { path: '/' }); console.log("쿠키 제거 완료"); } }; }, []); return ( <>

OauthLoginSuccess

); } 쿠키가 여전히 제거되지 않는 경우, 다음을 고려해야 합니다:브라우저 설정 확인: 일부 브라우저는 쿠키 삭제를 제한하거나 차단하는 설정을 가지고 있을 수 있습니다. 브라우저가 쿠키 삭제를 방해하고 있지 않은지 확인해야 합니다.개발자 도구를 사용하여 쿠키 검사: 쿠키를 제거하기 전후로 브라우저의 개발자 도구를 사용하여 쿠키를 검사합니다. 이는 쿠키가 제거되었는지 또는 다시 생성되었는지 확인하는 데 도움이 될 수 있습니다.쿠키 제거의 효과는 쿠키가 어떻게 설정되었는지, 특히 만료 날짜와 경로 등에 따라 달라질 수 있습니다.from: https://www.phind.com/search?cache=itlw0eckwvih4u3wq0xik3qa

React removeCookie 질문

1개의 답변

기술 목록