`오류 해결` 데이터 값 불러올 때 속성 값 = null

오류 내용

 

로그인된 상태에서 새로고침하면 클라이언트가

비로그인 상태로 인식하여 로그인 페이지로 보내는 오류가 발생했음

 

useEffect도 사용해보고 로직도 새로 다시 짜보고 useState로 loading을 만들어서 

user 데이터 값이 들어올 때까지 기다려보아도 해결할 수 없었는데

 

context 파일을 살펴보니 user의 초기 값이 null 인 것이었다

그러하여 3가지 상태를 정의하여 오류를 해결하기로 했다

 

해결 방법

1. 초기값이 존재하면 로딩중인 상태

2. null이면 비로그인 상태

3. 데이터 값이 존재하면 로그인 상태

 

2, 3번은 데이터베이스에서 전달된 값에 따라 상태가 null 혹은 데이터가 전달되지만

초기 값은 직접 커스텀 해줘야 한다 만약 컴포넌트 어딘가에서 user에 대한 데이터 값에

접근한다면 해당 속성까지 정의를 해주어야 하는 것이다.

 

  const [user, setUser] = useState({
    email: "",
    user_metadata: { nickname: "" }
  });

 

 

이렇게 사용되는 속성 값에 초기 값을 설정하여 null 값이 되지 않도록 설정하였더니

메인 페이지에서 새로고침을 하여도 데이터를 전달 받기 전까지 user 값이 null 아니기 때문에 오류가 나질 않는다

 

그리고 리액트에서 상태의 초기값을 설정하지 않으면,

해당 상태는 undefined로 지정이 되기 때문에 이 또한 기억해야 함

 

그리고 이러한 오류가 나오는 이유 중 하나는 

페이지 새로고침 시에는 리액트 컴포넌트의 상태가 초기화되기 때문임

 

컴포넌트 초기 렌더링 안정성 때문이라도 항상 초기 값을 설정해주자 !!!!