[React] 개인프로젝트 - MBTI 테스트 만들기(1) 트러블슈팅

🌟 새로고침하면 로그인 페이지로 가는 현상

1. 문제발생

로그인은 되어있어서 위에 레이아웃 부분은 제대로 프로필/테스트/결과보기/로그아웃 이 보이는데 새로고침만 하면 아랫부분이 로그인페이지로 넘어갔다.

2. 원인 추론

ProtectedRoute 부분이 Profile페이지 바깥에 감싸져 있었는데 조건문이 잘못 된 것 같았다.

기존코드:
if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

3. 해결 방안

isAuthenticated를 user로도 바꿔봤지만 로그인이 되었을 때를 결정짓는 token의 유무로 조건을 바꿔줘야 할 것 같았다.

변경된 코드:
const token = localStorage.getItem("accessToken");

if (!token) {
    return <Navigate to="/login" />;
  }

4. 결과

AppRouter.jsx 속 Profile페이지로 연결되는 일부분과
아래는 ProtectedRoute.jsx이다.

🌟 TestResultList 컴포넌트에서 불러온 user가 자꾸 null..

1. 문제발생

TestPage.jsx에서 로그인한 사용자의 테스트 결과가 나타나고, '모든 결과 보러가기' 버튼을 클릭하면 아무 것도 나타나지 않았고, id값을 불러오지 못한다는 내용의 에러가 있었다. 불러온 user를 콘솔로 확인해보니 null이 나왔다.

2. 원인추론

처음에 user를 props로 받아왔는데, 생각해보니 user는 'MbtiTestContext'로 페이지 전체 바깥에서 감싸주고 있었다.

3. 해결방안

props 받아오는 부분에서 지우고, TestResultList.jsx에서 const { user } = useContext(MbtiTestContext);를 작성하여 받아오는 방법으로 바꿨다.
그리고 user가 null이기 때문에 filter 메서드를 사용할 때 user 뒤에 ?를 붙여줬다.

4. 결과

배열메서드를 쓰고 있고, props나 contextAPI를 잘 사용하고 있음에도 에러가 뜬다면 ?를 붙여보자. (계속 비슷한 문제를 만나는데 생각이 잘 안나네...)