문제
로그인을 하지않은 상태면 서비스 사용이 불가능하게 기획하였고, 로그인 여부에 따라 메인 페이지에서 보여주는 컴포넌트를 구분하는 방식으로 진행하였고 아래 구조의 코드
<Route path=”/” element={isLoggedIn?<ProblemList/>:<Login/>}/>→ 로그인 여부가 바로 적용되지않고, 새로고침후에 적용됨
해결 1
로그인 여부에 따라 라우팅을 다르게하면 리액트에서 전체 파악이 되지 않았음
시도 1
메인이 되는 "/"와 "/login"으로 분리하여 라우팅한다.
"/"메인 페이지에서 로그인 여부를 확인하고, 로그인이 필요한 경우 로그인 페이지로 라우팅하는 방식으로 변경.
느낀 점
netxjs에서 app라우팅에서 디렉토리 구조만 알맞게 설정하면 isLoggedIn 같은 함수없이 개발할 수 있는 것 같다. 다음에는 next를 활용해봐야겠다.
Just Do It