문제 발생

프로필 이미지를 표시하는 코드에서 user.my_profile_image_url을 읽으려 할 때 다음과 같은 오류가 발생했다.

TypeError: Cannot read properties of null (reading 'my_profile_image_url')

오류 메시지를 보면 user가 null인 상태에서 my_profile_image_url 속성을 읽으려고 해서 발생한 문제다.

원인 추론

user 상태를 null로 초기화했기 때문에, 로그인 정보가 없는 경우 user.my_profile_image_url을 읽으려 하면 오류가 발생한다.

function AuthProvider({ children }) {
  // 현재 로그인한 유저의 auth 정보 저장
  const [user, setUser] = useState(null);
}

오류를 해결하려고 null 대신 {}로 변경했지만, 여전히 문제가 해결되지 않았다.

const [user, setUser] = useState({});

이렇게 하면 user가 undefined가 되는 건 막을 수 있지만, my_profile_image_url 속성이 없는 경우 오류가 발생할 수 있다.

해결 방법

?.(옵셔널 체이닝)을 사용해서 user가 null이거나 undefined일 때 속성을 안전하게 읽을 수 있도록 아래와 같이 변경했다.

<img src={user?.my_profile_image_url || profile} alt="profile" />

user가 null이거나 undefined일 경우 my_profile_image_url을 읽으려 하지 않고 undefined를 반환함으로써 기본 프로필 이미지(profile)가 정상적으로 표시되었다.

결과

옵셔널 체이닝을 적용한 후, 로그인되지 않은 상태에서도 오류 없이 기본 프로필 이미지가 정상적으로 표시되었다.