문제

오디오 파일을 업로드 하려다가 각 item 객체를 담고있는 items 배열을 map을 통하여 출력하고 있었다.
item에서는 각각 오디오 파일을 업로드 할 수 있도록 구조화되어있었는데, items 전체에서 오직 하나의 item에만 게시되었다. 다른 item들은 절대 게시되지 않았다.

해결

1. 이벤트핸들러는 하나의 파라미터(e)만 받는다

<label> id={`audio${item.index}`}
 <input 
    type='file' 
    id={`audio${item.index}`}
	onChange={e => 자신이쓸함수(e, param1, param2)}
  />
</label>
//param1, param2는 console에 출력되지 않는다

2. label htmlFor === input id

label의 htmlFor과 input의 id는 늘 일치해야 한다

<label> id={`audio${item.index}`}
 <input 
    type='file' 
    id={`audio${item.index}`}
	onChange={e => 자신이쓸함수(e)}
  />
</label>

그런데 html 특성 상 id는 고유값으로 설정해야 하는데,
이 때 template literal을 사용하여 해결하였다.

이후 input의 값을 console.log에 찍어보려면

e.target.id // input에서 id로 설정한 부분
e.target.files[0] // input으로 브라우저에 게시할 파일

하루 하고도 반나절 동안 이 input type file 문제때문에 골때렸다😔

참고가 된 블로그