[LAB-14] firestore에서 데이터를 불러왔는데 JSX를 반환할 때 에러가 뜹니다.

jh1109 commented 1 year ago

질문 작성자

노주희

문제 상황

const MorphDetail = () => {
  const params = useParams();
  console.log(params);
  const [morph, setMorph] = useState(null);
  useLayoutEffect(() => {
    (async () => {
      const docRef = doc(db, 'fat-tail-morph-list', params.id);
      const docSnap = await getDoc(docRef);
      if (docSnap.exists()) {
        setMorph(docSnap.data());
      } else {
        console.log('No such document!');
      }
    })();
  }, [params.id]);
  console.log(morph);
  return (
    <div className="App">
      <Header />
      <div className="mainContainer">
        <div>모프 갤러리</div>
        <div>이름</div>
      </div>
      <Navigation />
    </div>
  );
};

위와 같이 코드를 작성했을 때, 원하는 morph 문서 데이터를 잘 가져왔다는 것을 콘솔창에서 확인했습니다.

불러온 morph 데이터를 렌더링하기 위해 JSX에서 morph.name 등으로 사용하면 처음에는 해당 name 값이 잘 렌더링 됩니다.

return (
<div className="App">
  <Header />
  <div className="mainContainer">
    <div>모프 갤러리</div>
    <div>{morph.name}</div>
  </div>
  <Navigation />
</div>
);

하지만 뒤로 갔다가 다시 해당 Link를 클릭해서 페이지에 접근하면 아래와 같은 에러가 뜨면서 렌더링 되지 않습니다.
어떤 문제일까요..?😓

프로젝트 저장소 URL

https://github.com/jh1109/MofMof/tree/dev-morphInfo
브랜치명 : dev-morphInfo
압축 파일 mofmof.zip

환경 정보

운영체제 정보 (예: Windows, macOS)
Node.js 정보 (예: v16.14.0)
라이브러리 정보 (예: React v18.0.2)

yamoo9 commented 1 year ago

당부의 말

질문에 문제 상황에 대한 설명이 많이 부족합니다. MorphDetail 컴포넌트가 특정 라우트에서 렌더링 되어야 하는데 어떤 경로로 접속할 수 있는 지 어떻게 해야 할까요?

<Route path="/fattail-morph/:id/:morphName" element={<MorphDetail />} />

문제 컨텍스트에 대한 설명이 부족하면 답변하기에 앞서 분석 시간이 많이 필요합니다. 😥

문제 검토

결국... 오랜 시간이 걸려 링크를 찾아내고 나서야 문제를 분석할 수 있었습니다. 😳 정말... 이것 저것 다 눌러봤네요.

아래와 같은 오류가 발생한 원인은 데이터를 응답 받기 전에 morph 데이터를 렌더링 하려 시도했기 때문입니다. morph는 초깃값이 null이므로 속성을 가질 수 없다는 것이 오류 내용입니다.

결국 문제 원인은 로딩 상태가 없었기 때문입니다. 로딩 상태를 설정하면 아래 영상처럼 문제 없이 화면에 렌더링 됩니다.

MorphDetail.jsx 파일에 아래처럼 로딩 상태를 설정하면 문제가 해결됩니다. 🙂

const [isLoading, setIsLoading] = useState(true);

useLayoutEffect(() => {
  (async () => {
    const docRef = doc(db, 'fat-tail-morph-list', params.id);
    const docSnap = await getDoc(docRef);
    if (docSnap.exists()) {
      setMorph(docSnap.data());
      setIsLoading(false);
    } else {
      console.log('No such document!');
      setIsLoading(false);
    }
  })();
}, [params.id]);

if (isLoading) {
  return <div role="alert">모프 데이터 로딩 중...</div>;
}

jh1109 commented 1 year ago

ㅠㅠ 야무쌤 다음부터는 문제 상황 더 구체적으로 작성하겠습니다 😥 바쁘실텐데 시간 많이 뺏기게 해드려 죄송해요 ㅠㅠ 덕분에 문제는 해결했습니다!! 감사합니다~!

yamoo9 / likelion-FEQA