React Context API 활용시 상태값 미변경

Question

다음과 같이 Context를 활용하여 로그인시 isLogin의 상태값(false-> true)을 변경하고자 합니다.로그인 페이지에서 상태값을 변경후 '/main/pageA' 라는 경로로 이동하고 싶은데,다음과 같이 처리된 이후해당 경로로 이동하지 않습니다.무엇이 문제일까요? function App() { const {isLogin} : any = useContext(LoginContext); const [isToken, setIsToken] = useState(false); useEffect(()=>{ let token = sessionStorage.getItem('token'); if(isLogin && token){ setIsToken(true); } },[isLogin]) return ( } /> }/> : }/> }/> ); }import React , { createContext, useMemo, useState } from "react"; export interface LoginType { isLogin : boolean; setIsLogin : (value : boolean) => void; } export const LoginContext = createContext({isLogin : false, setIsLogin : ()=> {}}); export function LoginProvider({children} : {children : React.ReactNode}){ const [isLogin, setIsLogin] = useState(false); const value = useMemo(() => ({ isLogin, setIsLogin }), [isLogin, setIsLogin]) return {children} } ... const {setIsLogin} : any = useContext(LoginContext); try{ const {data, status} = await axios.post(${API}, body , options); if(status === 200){ sessionStorage.setItem('token', 'token123'); setIsLogin(true); console.log(`status : ${status}`); console.log(data); console.log(`isLogin : ${isLogin}`) alert('로그인에 성공하였습니다.'); navigate('/main/pageA'); } } catch(error){ console.log(error); alert('로그인에 실패하였습니다.'); } ..

codezzzz · Accepted Answer

context 사용부분이랑 LoginProvider 같은 계층에 있으면 안됩니다.LoginProvider 를 main.js쪽으로 옮기시면 될꺼같네요.

그린티라떼 · Answer

Main 컴포넌트에서 useContext를 사용했습니다.export default function Main(){ const {isLogin} : any = useContext(LoginContext); const navigate = useNavigate(); useEffect(()=>{ let token = sessionStorage.getItem('token'); if(!(isLogin && token)){ navigate('/') } },[isLogin]) ... }

React Context API 활용시 상태값 미변경

2개의 답변

#token 목록