input type='file

문제 상황

프로필 이미지를 컴포넌트로 따로 분리한 후에 나의 mj 페이지에서 test를 해보았다.
프로필 이미지에 프로필 변경하는 부분도 있기 때문에 사진이 잘 되는지 확인한 것임!

아주 간지나게 완료하고, 같은 페이지에 있던 커스텀 리뷰 모달창의 리뷰 사진 넣는 인풋 부분도 잘 작동되는지 확인해보았다.

근데 분명 모달창 내애 있는 ImageInput 컴포넌트를 통해 이미지를 선택했는데 왜 ProfileImage 컴포넌트의 프로필 이미지 부분이 바뀌었다.

아니 분명히 다른 컴포넌트인데 왜 안될까,,

문제 원인

잇츠 톡 투 챗지피티 했는데 input요소에서 type="file"을 사용하는 경우에는 해당 필드의 id 값에 따라 독립적으로 작동한다고 한다.나는 두 컴포넌트 모두 imageInput이라는 같은 Id 값을 부여하였기 때문에 두 인풋에서 선택한 파일들은 'imageInput' 이라는 하나의 속성에 저장되었던 것이다.

문제 해결

두 개의 컴포넌트의 input의 id를 다른 값을 부여하엿더니 문제 해결