[LAB-7] useReadDate 훅을 썼을 때 documentKey 값이 들어가지 않는 것 같습니다.

hayeonn2 commented 1 year ago

질문 작성자

김하연

문제 상황

아까 질문에 이어서.. useReadData 훅을 써보려고 추가했습니다. 콘솔에 찍어본 테스트 결과로는 이렇게 documentKey가 path에 잘 담겨서 나오는 것 같긴한데..

console.log(
      "doc이다",
      doc(dbService, "question", docRef._key.path.segments[1]),
    );
    if (confirm("게시글을 등록하시겠습니까?")) {
      const result = await readData(docRef._key.path.segments[1]);
      console.log("result입니다. ", result);

      // navigate(`/question/${result}`);
    }

documentKey 를 readData 안에 넣었을 땐 결과값을 반환하지 못하는 것 같습니다..

훅을 사용해 documentKey를 받아 question/documentKey 로 페이지 이동이 되도록 하고 싶은데 무엇이 문제인지 잘 모르겠습니다.

그리고 마지막으로 궁금한 점이 해당 훅을 사용해서 useNavigate(/question/${result}) 로 만들어주면 상세페이지를 보여주는 컴포넌트인 QuestionDetail.jsx 에서도 그 값을 받도록 수정을 해줘야 하나요? 전에 질문에서 성공했을 때 http://localhost:3000/question/documentKey 로 이동했지만 빈 페이지가 나왔습니다.

[문제 요약]

useReadData 훅을 사용했을 때 readData(documentKey) 값이 나오지 않습니다.
성공했을 때 QuestionDetail 페이지에서도 documentKey 안의 데이터를 받아와 넣어줘야 하는지에 대해 궁금합니다.
- 작성글 등록 후 넘어갔을 때 주소창에는 잘 나오지만 빈페이지가 나오는 오류

프로젝트 저장소 URL

https://github.com/Likelion-lucky7/DECO/tree/question-write-category%23109

브랜치명 : question-write-category#109

hayeonn2 commented 1 year ago

세민님의 질문을보고 데이터값은 받아왔는데 왜 useEffect로 받아와야하는지 궁금합니다🥲 그리고 데이터를 받아와서 일단 navigate(/question/${data[0].id}); 이런식으로 넣어줬는데 해당하는 데이터의 아이디 값을 받으려면 어떻게 받아줘야하는지 궁금합니다..

그냥 제일 최신 데이터를 부르면 된다고 생각했는데, 만약 사용자가 동시에 글을 쓸 경우..를 생각했을때 해당하는 데이터의 아이디값을 불러와야 할 것 같다는 생각이 듭니다!

yamoo9 commented 1 year ago

문제 해결

@hayeonn2 님 질문 "Firestore 데이터베이스에 추가된 데이터 아이디를 받아오는 방법"에 답변 드립니다. 😊

onSubmit 함수

onSubmit 함수 코드를 아래와 같이 수정합니다.

const onSubmit = async (e) => {
  e.preventDefault();

  try {

    // 1. 파일 업로드 요청 (업로드 할 파일 개수가 1개 이상인 경우만)
    if (fileInputRef.current.files.length > 0) {
      await uploadFiles();
    }

    // 2. 도큐멘트 추가 요청
    const docRef = await addDoc(collection(dbService, "question"), {
      category: selected,
      title: inputTitle,
      content: inputContent,
      hashtag: inputHashTagList,
      file: inputFileImage,
    });

    // 3. 도큐멘트 추가 이후, 추가된 도큐멘트 ID 값으로 도큐멘트 읽기 요청
    await readData(docRef.id);
  } catch (e) {
    console.error("error");
  }
};

data 상태 업데이트 이후, 콜백

readData 함수에 의해 data 값이 업데이트 되면, 이를 감지하는 useEffect 훅을 사용합니다. data 값이 업데이트 될 때 이펙트 콜백이 실행됩니다.

useEffect를 사용해야 하는 이유

React의 "상태 업데이트"는 바로 반영되지 않아요. 이 질문이 많은 걸로 보아 상태 업데이트 흐름 이해가 쉽지 않은 듯 하네요. 😥

✅ React "상태 업데이트" 질문/답변을 참고하여 "상태 업데이트" 흐름을 이해하세요. 😀

아래는 useEffect 훅 코드입니다.

useEffect(() => {
  // data 값이 있을 경우 if 조건 블록문 실행
  if (data) {
    console.log("result입니다. ", data.id);
    console.log(`/question/${data.id}로 이동합니다.`);
    // navigate(`/question/${data.id}`);
  }
}, [data, navigate]);

출력 결과

수정된 코드 결과가 요구대로 Console 패널에 출력됩니다. 🙂

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인해보세요.

src.zip

답변

성공했을 때 QuestionDetail 페이지에서도 documentKey 안의 데이터를 받아와 넣어줘야 하는지에 대해 궁금합니다.

네 맞습니다. 라우트에 따라 페이지 컴포넌트로 이동될 때 id 매개변수(params) 값을 읽어 Firestore에서 데이터를 가져와 렌더링 해야 합니다.

yamoo9 / likelion-FEQA