[🌪 Error Handling] 배열[이미지/인풋입력] 추가기능 / 2021-09-25

### 어떤 에러인가요?
- 이미지/인풋 기능있는 메뉴배열 추가 시 이미지와 인풋의 텍스트들이 추가는 되지만 사진수정 작업시
- 이미지업로드는 Dropzone 라이브러리 사용.
- 전체 메뉴 수정 및 삭제기능 시 id 값을 추출하여 일치하는 id 를 찾아야하는데 Dropzone 라이브러리에서 찾아내는것이 어려웠음.

### 에러 메시지

### 에러 핸들링 방법

- Dropzone 라이브러리사용하지 않기로 결정.

```js
기존에러코드
const changeMenuName = (e:any) => {
setMenuName(e.target.value)
const lastIdx = menuArr.length-1;
const copyArr = menuArr.slice()
copyArr[lastIdx].menuName = e.target.value
setMenuArr(copyArr);

}
const dropHandler = (file:any) => {
const formData = new FormData();
const config = {
headers: { 'content-type' : 'multipart/form-data'}
}
formData.append('file',file[0]);
//dispatch action axios 관리된거 와야함.
axios.post(`${END_POINTS}/image`,formData,config)
.then((res)=>{
if(res.data.success){
const copyArr = menuArr.slice()
const lastIdx = copyArr.length-1;
copyArr[lastIdx].menuImg = res.data.filePath
console.log("copyImg만들어가는 배열",copyArr)
setMenuImg(res.data.filePath)

}else{
alert('파일저장실패')
}
})
.catch((err)=>{
return console.log('==file 가져오기 실패===',err)
})
}

{({getRootProps, getInputProps}) => (


{el.menuImg.length === 0 ?
+
:

}

)}

```

**해결코드**
```js
const dropHandler = (e:any) => {
const file = e.target.files
const formData = new FormData();
const config = {
headers: { 'content-type' : 'multipart/form-data'}
}
formData.append('file',file[0]);
//dispatch action axios 관리된거 와야함.
axios.post(`${END_POINTS}/image`,formData,config)
.then((res)=>{
if(res.data.success){
const copyArr = JSON.parse(JSON.stringify(menuArr));
// console.log('copyArr===',copyArr)
// console.log('copyArr target===',copyArr[e.target.id])
copyArr[e.target.id].menuImg = res.data.filePath
setMenuArr(copyArr)
setMenuImg(res.data.filePath)
}else{
alert('파일저장실패')
}
})
.catch((err)=>{
return console.log('==file 가져오기 실패===',err)
})
}

// FileUp 은 메뉴클릭할 수 있는 + 부분 / MenuImg 메뉴업로드 시 나타나는 이미지

메뉴 이미지
{checkHandler(e)}}
/>
{uploadHandler(e)}}
id={idx}
src = {el.menuImg}
alt = {el.menuImg}/>

```
기존에 원본배열이 변경되지않는 얕은복사인 slice 를 사용한 후 menuArr 에 적용시키것과 달리,
깊은복사 방식을 이용하고 이벤트가 발생될때마다 생기는 id 값을 인덱스로 넣어 적용시켰다.

dropzone 라이브러리는 제대로 공부하고 사용하지 않아서 어떤 원리로 작동하는지 제대로 알지 못한 채 편할것 같아 "그냥" 사용한게 화근이었다.
오류가 터진 후 뒤늦게 공식문서를 찾아보거나 구글링을 하여 해결하려했으나 원하는 정보를 얻을 수 없어 결국은 사용하지 않게 되었다.
라이브러리 사용은 꼭꼭 정확하게 공부하고 적용해야겠다.

### 에러 핸들링을 위해 참고한 레퍼런스 링크