react router 새로고침시 질문입니다.

Question

const [item,setItem] = useState(false) {item === false ? : } 이렇게 컴포넌트에서 작성해주었습니다. Cat과 Dog 각각의 컴포넌트에서 useSate값을 수정할수 있는 버튼이 있습니다. npm start로 시작했을때 cat을 먼저 보여주는데 그후 cat에서 버튼을 누르면 dog로 화면이 이동됩니다. dog에서 새로고침을 하면 cat화면으로 바뀌더군요.... 그래서 localStorage 를 사용해서 값을 로컬에 저장해줬는데 이번에는 render가 안되는 ㅡ,,ㅡ 이거 만약 새로고침 했을때 페이지 유지하려면 어떻게 해야할까요? Cat과 Dog은 제가 보기 편하게 만든거고 사실은 홈페이지에서 한국어 페이지와 영어 페이지입니다. 설계를 다시해야하나요?

페코옹 · Accepted Answer

네 맞습니다.위 님의 과정을 조금 스므스 하게 하기 위해 초기 어플리케이션 셋업 시 loading 화면을 보여주든가 하죠요런 느낌으로? const [loading, setLoading] = useState(true);const [item,setItem] = useState(false) useEffect(() => { const value = localStroage.getItem("item") if(value) setItem(value) setLoading(false)},[]); if (loadming ) return return item === false ? :

n2ptune · Answer

리액트의 State는 애플리케이션이 초기화 될 때마다(새로고침 할 때마다) 지정된 기본 값으로 초기화 되므로 여기서는 항상 false로 시작합니다. useEffect를 사용해서 컴포넌트가 렌더링되기 전에 localStorage에 값을 불러와서 setItem으로 item을 트리거하시면 되겠네요.

얍얍얍 · Answer

두분다 감사합니다 한번 말씀해주신데로 해보겠습니다

react router 새로고침시 질문입니다.

3개의 답변

Q&A 목록