이미지 수정 등록

수정하는 컴포넌트에서 등록 했던 기존 이미지 출력

import

import {
  getStorage,
  ref,
  uploadBytes,
  listAll,
  getDownloadURL,
} from "firebase/storage";
import { firebaseApp } from "../../firebase";

Modify컴포넌트

//수정 하는 이미지 담은 리스트
const [imageNameList, setImageNameList] = useState<string[]>([]);

 useEffect(() => {
 
    const storage = getStorage(firebaseApp);
    const imageRef = ref(storage, `images/${uidVar}/${boardSelectedId}/`);
    
    //이미지 불러 오는 코드
    listAll(imageRef).then((response) => {
      const promises = response.items.map((item) => getDownloadURL(item));
      Promise.all(promises).then((urls) => {
        setImageNameList((prev) => [...prev, ...urls]); // 기존 배열에 새로운 URL 추가
      });
    });
  }, []);

등록 했던 이미지 불러오기 listAll 사용

Promise.all
모든 Promise가 성공적으로 완료되었을 때 하나의 Promise로 반환됩니다. 즉, 여러 개의 비동기 작업을 동시에 진행하고, 모든 작업이 완료되면 결과를 반환하는데 사용됩니다.

return

 <div className="page_txt">         
    {imageNameList.map((el) => {
     return <img key={el} src={el} />;
    })}
 </div>