[React.js] url을 수동으로 입력해서 이동하면 state가 없어져요

Question

안녕하세요!리액트로 프로젝트 개발 중 오류?가 생겨서 질문드립니다.일종의 커뮤니티를 만들어보는 플젝을 진행하는 중인데 현재 로그인 기능을 만든 후 글쓰기 기능을 만들고 있는 상황이고, 로그인이 성공하면 app.jsx에서 만들어둔 user state에 로그인한 유저의 username이나 useremail등의 정보를 가지도록 했어요. 이를 통해서 로그인을 해야만 들어갈 수 있는 페이지로 가면 useContext로 app.jsx에서 만든 user state에 접근해 user의 정보가 세팅된 경우에만 접근 가능하도록 설정했습니다.코드를 같이 보여드리자면,,아래가 app.jsx입니다. 로그인이 성공하면 user state에 로그인한 유저의 정보가 세팅되도록 코드를 짰어요. 그리고 useContext를 통해 어느 컴포넌트에서나 user state값에 접근 가능하도록 해뒀습니다.export const User = React.createContext(null); export const Logout = React.createContext(null); function App({authService, crudService}) { const [user, setUser] = useState({ id: null, email: null, username: null }); // ... 생략 return ( }/> }/> }/> }/> ); } export default App;그리고 아래가 로그인한 사람만 접근 가능토록 한 WritePostPage.jsx입니다. useEffect를 통해 useContext로 받아온 user정보가 세팅돼있지 않으면 접근이 불가능하게끔 만들어뒀어요. React-Router를 통해서 /write-post로 왔을 때 이 페이지를 보여주게끔 만들었습니당const WritePostPage = ({ crudService }) => { const user = useContext(User); // ...생략 const navigate = useNavigate(); useEffect(() => { if(!user.id){ navigate("/"); } }, [user, navigate]); // ...셍략 return( // ...생략 ) } export default WritePostPage;암튼 그래서 로그인 한 이후 버튼등을 눌러서 WritePostPage로 이동된 경우엔 접근이 잘 되는 걸 확인했는데, 브라우저 상단에 url을 직접 조작해서 /write-post로 이동하면 접근이 안됩니다..user정보가 세팅돼있지 않으면 /으로 이동하게끔 했는데, 저렇게 url을 직접 조작해서 이동하면 /으로 이동되면서 user state값이 없어지는 현상이 생기더라구요..혹시 이거 왜 이런지 아시는 분 있을까요? ㅠ 네이버 같은 곳도 보면 블로그 글쓰기 url을 복사해뒀다가 브라우저 상단에 입력하면 바로 글쓰기 페이지로 잘만 이동되던데 저는 왜 이럴까요..user state를 저장해서 로그인 여부를 판단하는 방식에 문제가 있는건지, url을 직접 조작하면 같은 도메인 안이어도 state가 소실되는건지..제가 뭔가 기본적인 걸 놓치고 있는 것 같은데 무엇을 몰라서 이런 상황이 생기는지도 감이 잘 안잡혀요..고수님들 도와주시면 감사하겠습니다..

메이플비 · Answer

리액트 내에서 navigate을 사용해서 해당 url로 가는것과, url을 직접 치는것은 의미가 다릅니다.url을 직접 치는것은 앱을 새로 불러와서 해당 url로 이동하는것으로 생각하시면 됩니다. 즉, 로컬 스테이트에 저장되어 있던 내용은 앱이 꺼졌다가 다시 실행되는 상황이니 저장되어 있던 데이터가 사라지게 되겠죠.다른 웹서비스 같은데서 저게 가능한건 앱의 흐름 자체를 저렇게 보이게끔 제어를 하기 때문이고, 이는 어렵진 않지만 그렇다고 자동으로 알아서 되는 수준은 아니라서 흐름 제어를 해줘야 합니다.댓글로 설명하기엔 내용이 기니까 로그인 유지 같은 검색어로 검색해보시면 됩니다.

[React.js] url을 수동으로 입력해서 이동하면 state가 없어져요

1개의 답변

기타 목록