[React] useState 배열의 객체 수정

개요

심화 프로젝트를 진행하면서 서브 이미지를 5개 선택하는 포멧을 작성할려고 한다.

이미지를 선택하는 순간 supabase에 업로드가 되고 결과로 나온 url을 프리뷰 화면으로 보여줄려고 했다.

url을 올리면서 name이 지정한 걸로 바뀌기 때문에 배열안에 객체로 보여줘야겠다는 생각을 했다.

---

useState

일단 key에 name을 지정해 주고 다음 key을 두고 value는 빈값으로 넣었다

  const [subImgObject, setSubImgObject] = useState<subImgType[]>([
    { name: "subImg1", url: "" },
    { name: "subImg2", url: "" },
    { name: "subImg3", url: "" },
    { name: "subImg4", url: "" },
    { name: "subImg5", url: "" },
  ]);

 

useState

id값으로 인덱스를 찾고 새로운 변수를 선언해 기존의 배열을 복사하는 과정을 거친다
useState로 만든 변수는 set함수로만 값을 변경할 수 있기 때문이다.

let findIndex = subImgObject.findIndex((item) => item.name === subImg);
let copiedItems = [...subImgObject];

 

useState로 배열의 객체 key와 value 수정

복사한 배열에 수정할 값을 할당하고 setSubImgObject를 사용해 수정한 배열로 items를 업데이트 한다

if (check) {
  // 값을 넣어줄 때
  copiedItems[findIndex].url = data.publicUrl;
  setSubImgObject(copiedItems);
} else {
  // 값을 뺄 때
  copiedItems[findIndex].url = "";
  setSubImgObject(copiedItems);
}

---

결론

작업을 하다가 페이지 수정이 있을 때 해당위치로 놓이는게 UX적으로 옳지 않다고 생각해서

지금 나온 코드는 사용하지 못하게 될 거 같다.

오히려 프리뷰 화면을 보여주는게 맞다고 결론이 나와서 수정하게 되는데,

해당 부분 작업 해결 부분은 좋았어서 메모해 둔다.