`오류 해결` Cannot read properties of null (호이스팅, useEffect)

오류 내용

 

supabase에서 user 데이터를 가져왔는데

전체 데이터는 출력되지만 속성을 불러오면 속성 값이 없다는 오류가 나온다..

Header.jsx:11 Uncaught TypeError: Cannot read properties of null (reading 'aud')
    at Header (Header.jsx:11:20)
    at renderWithHooks (chunk-6VWAHX6D.js?v=e96a4e37:11548:26)
    at mountIndeterminateComponent (chunk-6VWAHX6D.js?v=e96a4e37:14926:21)
    at beginWork (chunk-6VWAHX6D.js?v=e96a4e37:15914:22)
    at HTMLUnknownElement.callCallback2 (chunk-6VWAHX6D.js?v=e96a4e37:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-6VWAHX6D.js?v=e96a4e37:3699:24)
    at invokeGuardedCallback (chunk-6VWAHX6D.js?v=e96a4e37:3733:39)
    at beginWork$1 (chunk-6VWAHX6D.js?v=e96a4e37:19765:15)
    at performUnitOfWork (chunk-6VWAHX6D.js?v=e96a4e37:19198:20)

 

 

자바스크립트 영역에서 올바르게 속성 이름을 입력해도 나오질 않는데

return (
    <S.HeaderContainer>
            <Link>{user.email}님 안녕하세요</Link>
    </S.HeaderContainer>
  );

 

웃긴건  이렇게 jsx 문법안에 가져올 땐 아무 이상 없다는 것 도대체 왜 이런 것일까..? 무언가 놓친게 있는 것인가ㅠㅠ

 

 

호이스팅

 

알고보니 호이스팅이 되면서 값이 없는 상태에서 데이터를 가져오려 할 때  null  값으로 나오기 때문이라고 함

변수나 함수의 선언이 코드의 상단으로 끌어올려지면서 발생하는 문제였던 거쥬

 

호이스팅 예시

let user;

function getUser() {
  // user 데이터가 아직 설정되지 않은 상태에서 속성에 접근하려고 함
  console.log(user.name); // TypeError: Cannot read property 'name' of undefined
}

getUser();

user = {
  name: "John",
  email: "john@example.com"
};

 

 

이렇게 user 변수가 먼저 선언되고 값이 없는 상태에서 속성에 접근하려 하니까 오류가 나는 것임

 

해결 방법 - useEffect 사용

useEffect(() => {
  if (user && user.user_metadata) {
    setNickname(user.user_metadata.nickname);
  }
}, [user]);

 

user 정보가 있을 때만 nickname을 설정해

useEffect는 user가 바뀔 때마다 실행되며 user 데이터가 준비되면

그 안의 nickname을 꺼내서 상태로 저장함

이렇게 하면 아직 user 정보가 없을 때 생기는 오류를 막을 수 있다!!!!!

 

 

그러하여 자바스크립트 영역에서 정상적으로 user의 속성을 받을 수 있게 됐음 나이수!!!

 

 

마치며

 

프로젝트 진행하면서 별의 별 오류가 다 나는데

이 오류를 해결하다보면 이전에 배웠던 내용들이 나온다..

호이스팅도 전에  배웠던 내용인데 시간이 지나다 보니 

많이 까먹은 것 같다 이래서 개발자는 계속해서 공부해야 하는구나ㅠㅠ

그래도 해결해서 좋다 나이수!!!!!!!!!!!