❌에러 상황
자세한 구현을 하기 전 localstorage에 있는 access token 값이 null이냐 아니냐로 로그인 확인을 했다.
이때 처음 로그인 성공 후 post list 페이지로 가면 access token이 null값으로 인식되어 로그인 페이지로 돌아오는 오류가 발생했다.
하지만, url을 이용하여 post list 페이지로 이동하면 다시 로그인 페이지로 돌아오지 않는다.
🔎setState
setState를 사용하고 console.log를 확인해보면 setState 다음 줄에 있는 console log에는 항상 값이 초기값으로 나온다.
setState의 결과를 확인하기 위해서는 useEffect의 두 번째 인자로 setState로 지정한 변수를 줘야한다.
이 경우는 랜더링 효율을 높이기 위해 코드를 끝까지 한번 확인 후 setState가 동작한다는 것.
즉 비동기로 동작하기 때문에 setState가 포함되어 있는 함수를 한번 랜더링 시킨후 state가 변한다는 것이다.
그런데 accesstoken은 localstorage에 있는 건데 왜 인식을 못하는가..
✔ 에러 원인
내 코드는 다음과 같은 구조를 가지고 있었다.
const accessToken = localStorage.getItem("access");
const PostAPI = () => {
useEffect(() => {
if (accessToken === null ){
navigate('/login);
}
})
}useEffect는 컴포넌트가 마운트될 때 한 번 실행되는 것이 아니라, PostAPI 함수가 정의될 때 한 번 실행된다.
컴포넌트 마운트는 리액트 애플리케이션에서 컴포넌트가 DOM에 처음으로 렌더링되는 과정을 가리킵킨다. 쉽게 말해, 컴포넌트가 화면에 표시되기 시작하는 단계!!
accessToken 값을 가져오는 코드가 PostAPI 함수 외부에 위치하고, 이 코드는 컴포넌트가 마운트될 때 한 번만 실행된다.
즉, accessToken이 초기에 설정될 때 localStorage.getItem("access")를 사용하여 설정되지만 이후 accessToken이 업데이트되거나 변경될 때 PostAPI 함수 내에서는 이를 감지하지 않는다.
그래서 나는 localStorage에서 바로 값을 가져와서 사용하기로 했다.
아주 잘 동작한다..
