세션스토리지 토큰 여부에 따른 헤더 분기 처리

Question

로그인시 세션스토리지에 토큰을 저장하고, 토큰 여부에 따라 표시될 헤더를 다르게 하고 싶습니다. 세션 스토리지에 토큰이 저장된 이후에도 이전의 헤더가 표시됩니다.어떻게 처리하면 될까요?function App() { let token = sessionStorage.getItem('token'); const [isToken, setIsToken] = useState(false); useEffect(()=>{ isToken ? setIsToken(true) : setIsToken(false) },[isToken]) return ( {token ? : } <-- 표시될 헤더 다르게 } /> }/> }/> }/> }/> ); } export default App;

codezzzz · Answer

App.js가 처음 렌더 될때 말고 재렌더 안되서 그런거 같네요.

codezzzz · Answer

const isLogin = useContext(LoginContext); // 그냥 임시 const [isToken, setIsToken] = useState(false); useEffect(()=>{ let token = sessionStorage.getItem('token'); if(isLogin && token){ setIsToken(true); } },[isLogin]) isToken ? : 이런 형식이여야 하지 않을까 싶네요.

세션스토리지 토큰 여부에 따른 헤더 분기 처리

2개의 답변

#react-router 목록