[LAB-11] url로 입력한 이미지가 출력되지 않습니다

[kyuran6]

질문 작성자

김진희

문제 상황

• 파이어스토어에서 가져온 이미지 url값을 스와이퍼에 띄우려고 하는데 이미지가 출력되지 않습니다

• 배열 baseImgArr은 사용자가 아무런 이미지를 업로드하지 않았을때 기본으로 보여주는 샘플 이미지입니다. 샘플이미지만 출력하려고 했을때는 다음과같이 정상적으로 출력됩니다

• 사용자가 파이어스토어의 Images 폴더에 업로드를 하면 url을 가져와서 보여주는 방식으로 만들려고 하고 있고, 로그인된 유저의 id값을 받아오는 부분은 아직 구현하지 못하여서, 파이어스토어에 올려논 이미지 url값을 가져와서 테스트하는 중입니다.

• 사용자가 이미지 배열이 정상적으로 push되었는지 확인하려고 콘솔로 출력해봤을때 정상적으로 push된것을 확인할 수 있었습니다. 하지만 출력은 되지 않는 상황입니다.

프로젝트 저장소 URL

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
• feature/main-MainPage
• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. Asparagus.zip

환경 정보

• macOS
• Node.js v19.7.0
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 원인

컴포넌트 상태로 imgArr을 관리하지 않으면 React에 의해 리-렌더링 되지 않기 때문입니다. Firebase에서 가져온 이미지 URL은 비동기 요청/응답된 결과이기에 최초 렌더링 이후, React에 의해 다시 렌더링되어야 합니다.

const imgArr = []

문제 해결

컴포넌트 상태로 imgArr을 관리하면 React가 화면에 비동기 요청/응답 받은 이미지 URL을 정상적으로 출력합니다. 😃 그리고 응답 받는 이미지 개수가 너무 많아 10개로 줄였습니다. (참고: limit 함수 활용)

const [imgArr, setImgArr] = useState([]); 

useEffect(()=>{

  const getImages = async () =>{
    const q = query(
      collection(db, 'images'),
      where('user_uid',"==","EHSFq6SN4UfSAyGTw6UH"),
      limit(10)
    )
    const myImgList = await getDocs(q)

    const imageList = []
    myImgList.docs.map((doc)=>imageList.push(doc.data().url))

    setImgArr(imageList);
  }

  getImages()
},[imgArr])

컴포넌트 상태로 관리되면 이제 정상적으로 이미지가 화면에 렌더링 됩니다. 😀

[kyuran6]

덕분에 해결했습니다 ㅎㅎㅎ 감사합니다 ^^