08. 자살예방웹사이트 - 게시글 수정페이지 value값 넣기

게시글 수정 어떻게하지

 

고민해보자.. 음.. postId로 내 게시글을 작성하던 시점으로 돌아가서 기존에 저장된 데이터를 value에 보여주면 되지않을까?

일단 내가 하고 싶은 건 게시글 작성 폼으로 다시 돌아가서 수정하게 하는 것

 

[Cloud FireStore - posts Data]

[EditPostForm]

난 참 비동기가 헷갈린다. 확실히하고 넘어가야겠다.

 

  useEffect(() => {
    // Firebase Firestore에서 해당 게시물의 정보를 가져오는 비동기 함수
    async function fetchPost() {
      try {
        const postRef = doc(collection(db, "posts"), postId); 
        const docSnap = await getDoc(postRef);

        if (docSnap.exists()) {
        // 게시물 정보를 가져온다
          const postData = docSnap.data(); 
          setDetailPost({ ...postData, postId });
          console.log(detailPost, "detailPost");
        } else {
          console.log("게시물을 찾을 수 없습니다.");
        }
      } catch (error) {
        console.error("게시물을 불러오는 중 오류가 발생했습니다.", error);
      }
    }
// 게시물 정보를 가져오는 함수 호출
    fetchPost(); 
  }, [postId]);

console.log(detailPost, "detailPost"); 를 한 결과

detailPost가 null로 뜨는 이유는 fetchPost 함수가 비동기로 데이터를 가져오기 때문이다

fetchPost 함수가 실행되는 동안은 데이터가 아직 로드되지 않았으므로 detailPost가 null일 수 밖에..

 

동기 : 순차진행

직렬적으로 태스크를 수행하는 방식이다.
즉, 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 어떠한 태스크를 처리할 동안 나머지 태스크는 대기한다.
실제로 cpu가 느려지는 것은 아니지만 시스템의 전체적인 효율이 저하된다고 할 수 있다.

비동기: 동시진행

병렬적으로 태스크를 수행하는 방식이다.
요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식이다.
a 태스크가 실행되는 시간 동안 b 태스크를 할 수 있으므로 자원을 효율적으로 사용할 수 있다.
이때, 비동기 요청시 응답 후 처리할 '콜백 함수'를 함께 알려준다. 따라서 해당 태스크가 완료되었을 때, '콜백 함수'가 호출된다.

 

-> 문제 : 여러 개의 콜백 함수가 중첩되어 복잡도가 높아지는 콜백 헬 발생 할 수 있음

 

[해결방안]

fetchPost 함수가 데이터를 가져온 후에 폼 컨트롤의 초기값을 설정해한다.

fetchPost 함수가 데이터를 가져온 후에 setDetailPost를 호출하면,

컴포넌트가 리렌더링되고 detailPost가 새로운 값으로 업데이트됩니다.

그리고나서 폼 컨트롤의 초기값을 설정할 수 있다.

 

useEffect(() => {
    async function fetchPost() {
      try {
        const postRef = doc(collection(db, "posts"), postId);
        const docSnap = await getDoc(postRef);

        if (docSnap.exists()) {
          const postData = docSnap.data();
          setDetailPost({ ...postData, postId });
        } else {
          console.log("게시물을 찾을 수 없습니다.");
        }
      } catch (error) {
        console.error("게시물을 불러오는 중 오류가 발생했습니다.", error);
      }
    }

    fetchPost();
  }, [postId]);

  // detailPost가 업데이트될 때마다 초기값 설정
  useEffect(() => {
    if (detailPost) {
       setTitle(detailPost.title);
      setContent(detailPost.content);
    }
  }, [detailPost]);

 

 

참고 블로그 :https://velog.io/@khy226/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80-Promise-asyncawait-%EA%B0%9C%EB%85%90https://lunuloopp.tistory.com/entry/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-callback%ED%95%A8%EC%88%98-promise-async-await