[LAB-15] Firestore에서 받은 정보를 저장한 배열이 렌더링되지 않습니다.(이미지)

질문 작성자

윤새한

문제 상황

이미지를 storage에 저장해두고 getDownloadURL로 가져왔습니다.
객실정보를 firestore에 저장할 때, 이미지를 imageUrl이라는 이름으로 storage에 저장한 파일명과 일치하도록 작성하였고,
rendering 시 forEach로 이미지와 text들을 배열로 가져와서 사용하려고 코드를 작성하였고, text 정보(doc.data())들은 화면에 rendering되나 이미지 정보를 담아놓은 배열은 화면에 렌더링 되지 않습니다.(console.log로 확인해본 결과 배열은 잘 나오는 것으로 확인되었습니다.)
추가적으로 console.log로 이미지 배열을 찍어보았을 때 배열이 두개씩 찍히는 것을 확인하고 엄격모드로 되어있나 확인해보았지만 특이사항 없었습니다.

export const Reservation3 = () => {
  // const [imageUrl, setImageUrl] = useState('');
  const [rooms, setRooms] = useState([]);
  const [roomImageList, setRoomImageList] = useState([]);

  useLayoutEffect(() => {
    const getRooms = (async () => {
      const q = query(
        collection(db, 'rooms'),
        where('maxNumberOfPerson', '<=', 5)
      );

      const querySnapshot = await getDocs(q);
      if (querySnapshot.empty) {
        console.log('다른 날짜를 선택해주세요');
      } else {
        const roomList = [];
        const imageList = [];
        querySnapshot.forEach((doc) => {
          const storage = getStorage();
          const storageRef = ref(storage, doc.data().imageUrl);
          getDownloadURL(storageRef)
            .then((url) => {
              imageList.push(url);
            })
            .catch((error) => {
              console.error(error);
            });

          roomList.push(doc.data());
        });
        setRooms(roomList);
        setRoomImageList(imageList);
      }
    })();
  }, []);

  return (
    <ReservationTitle value={'객실'}>
      <StepNavigation
        page={'reservation3'}
        labelArray={['투숙객 선택', '날짜 선택', '객실 선택']}
      ></StepNavigation>
      <Container>
        {rooms.map((room, index) => (
          <RoomInfoCard
            key={room.id}
            name={room.name}
            description={room.description}
            notice={room.notice}
            addInfoSite={room.site}
            price={room.price}
            imageUrl={roomImageList[0]}
            isLast={index === rooms.length - 1}
          />
        ))}
      </Container>
      <ButtonWrapper>
        <BackButton id={'reservation2'} value={'뒤로'} />
        <ContinueButton id={'reservation4'} value={'장바구니 및 결제'} />
      </ButtonWrapper>
    </ReservationTitle>
  );
};

export default Reservation3;

렌더링된 화면

.env파일을 디엠으로 보내드리겠습니다.

프로젝트 저장소 URL

https://github.com/ovelute53/final-project/blob/develop/final-cra/src/pages/Reservation3.jsx

develop 브랜치에서 작업 진행하였습니다.

환경 정보

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

문제 해결

질문의 문제는 https://github.com/yamoo9/likelion-FEQA/issues/208#issuecomment-1480903863 답변과 유사한 상황입니다. Reservation3.jsx 파일을 아래와 같이 수정해보세요. 😊

Reservation3.jsx

export const Reservation3 = () => {
  const [rooms, setRooms] = useState([]);

  useLayoutEffect(() => {
    (async () => {
      const q = query(
        collection(db, 'rooms'),
        where('maxNumberOfPerson', '<=', 5)
      );

      const querySnapshot = await getDocs(q);

      if (querySnapshot.empty) {
        console.log('다른 날짜를 선택해주세요');
      } else {
        const roomList = [];
        const imageList = [];

        querySnapshot.forEach((doc) => {
          const storage = getStorage();

          const data = doc.data();
          roomList.push(data);

          const storageRef = ref(storage, data.imageUrl);
          imageList.push(
            getDownloadURL(storageRef)
              .then((url) => url)
              .catch((error) => console.error)
          );
        });

        Promise.all(imageList)
          .then((imageUrls) => {
            imageUrls.forEach((url, index) => {
              roomList[index].imageUrl = url;
            });
            setRooms(roomList);
          })
          .catch((error) => console.error);
      }
    })();
  }, []);

  return (
    <ReservationTitle value={'객실'}>
      <StepNavigation
        page={'reservation3'}
        labelArray={['투숙객 선택', '날짜 선택', '객실 선택']}
      ></StepNavigation>
      <Container>
        {rooms.map((room, index) => (
          <RoomInfoCard
            key={room.id}
            name={room.name}
            description={room.description}
            notice={room.notice}
            addInfoSite={room.site}
            price={room.price}
            imageUrl={room.imageUrl}
            isLast={index === rooms.length - 1}
          />
        ))}
      </Container>
      <ButtonWrapper>
        <BackButton id={'reservation2'} value={'뒤로'} />
        <ContinueButton id={'reservation4'} value={'장바구니 및 결제'} />
      </ButtonWrapper>
    </ReservationTitle>
  );
};

그러면 아래처럼 이미지가 정상적으로 표시됩니다.

yamoo9 / likelion-FEQA