[React/Project] input 으로 업로드한 여러 개의 이미지 하나씩 삭제하기

[React/Project] input 으로 업로드한 여러 개의 이미지 하나씩 삭제하기

 

📌 업로드한 여러개의 이미지 개별 삭제하기

✅ 삭제 버튼을 만들어준다.

<button type="button">
    <img alt="업로드 이미지 제거" src="src/assets/icon-close-button.svg" />
</button>

 

✅ 버튼에 클릭 이벤트를 걸어준다.

<button type="button" onClick={removeImg}>
    <img alt="업로드 이미지 제거" src="src/assets/icon-close-button.svg"  / >
</button>

 

✅ 이렇게 클릭 이벤트를 걸어주면 이미지 전체가 지워진다.

function removeImg() {
    setPostImg([]);
    setPreviewImg([]);
}

단순히 이렇게해서 상태를 초기화한다면, 어떤 x 버튼을 눌러도 업로드된 이미지가 모두 제거될 것이다.

그렇다면 내가 누른 버튼의 index 를 파악해서 그 index에 해당하는 파일의 index 번째 파일을 지워야할 것.

 

✅ 매개변수에 index 를 넣어주고, 파일과 파일 url 을 전개해 변수에 넣어준다.

  function removeImg(index) {
    const removePostImg = [...postImg];
    const removePreviewImg = [...previewImg];
  }

removePostImg 와 removePreviewImg 에 각각 파일과 파일 url 을 전개해서 넣어준다.

removePostImg 와 removePreviewImg 는 이제 배열이 되었으니 배열의 요소를 제거해줄 수 있는 splice 메서드를 사용할 수 있을 것이다.

 

✅ splice 로 배열의 요소 1개 삭제하기

function removeImg(index) {
    const removePostImg = [...postImg];
    removePostImg.splice(index, 1);
    
    const removePreviewImg = [...previewImg];
    removePreviewImg.splice(index, 1);
}

removePostImg 와 removePreviewImg 배열의 index 번째 요소를 1개 삭제하기

이제 변경된 상태를 업데이트 해줘야한다.

 

✅ state 업데이트

function removeImg(index) {
    const removePostImg = [...postImg];
    removePostImg.splice(index, 1);
    setPostImg(removePostImg);

    const removePreviewImg = [...previewImg];
    removePreviewImg.splice(index, 1);
    setPreviewImg(removePreviewImg);
}

 

✅ 콜백함수에 매개변수 추가

이대로라면 내가 클릭한 이미지가 아닌 최근에 추가한 이미지부터 삭제가 된다.

따라서 버튼의 콜백함수 내 매개변수에 map 함수의 매개변수 중 인덱스에 해당하는 i 를 넣어준다.

previewImg.map((url, i) => 
    <ProductImage key={i}>
        <button type="button" onClick={()=>removeImg(i)}>
          <img alt="업로드 이미지 제거" src="src/assets/icon-close-button.svg" />
        </button>
        <img alt={url} src={url} />
    </ProductImage>
)

이렇게 하면 원하는 이미지만 제거가 가능하다!

 

✅ 완성

 

📌 관련 포스팅

[React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(단일 이미지)

 

[React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(다중 이미지)

 

 

 

---

참고 :
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.

 

🔅 멋쟁이사자처럼 프론트엔드 4기 파이널 프로젝트

📝 당근마켓 클론코딩

🧑🏻‍💻 작업 인원 : 5인

🕑 프로젝트 기간 : 23.03.10 ~ 03.28

🔧 기술 스택

    • Toolchains : Vite

    • Style : Styled Component

    • 상태 관리 : Recoil

    • Severless : Firebase