🌟 useRef() 사용해 input file 이벤트 클릭한 DOM에서 트리거하기

현재 네비게이션과 홈에서 <Tweet /> 컴포넌트를 사용하여 새로운 트윗을 작성할 수 있다.

const fileInput = useRef();

<input
  name="file"
  type="file"
  accept="image/*"
  onChange={onFileChange}
  ref={fileInput}
  id="files"
  className="hidden"
  />
<lable className="icon" htmlFor="files">
  <FontAwesomeIcon icon={faImage} size="2x" />
</lable>

• useRef() 훅을 사용하여 DOM을 선택할 수 있게 해두었다.
• input 엘리먼트에 ref prop으로 fileInput 변수를 줘서 input 엘리먼트에 접근하여 DOM API를 제어할 수 있게 해두었다. (업로드한 파일을 삭제하는 코드를 위해 해뒀다.)
• 그리고 기본 file 업로드 모양을 없애고 이모티콘을 사용하기 위해 input에는 hidden 클래스를 주고 label 태그를 만들어 그 안에 이모티콘을 넣어서 파일 업로더를 클릭할 수 있게 했다.

그런데 홈에서 이미지 파일을 업로드 하면 화면에 뜨지 않아 이상하게 여기던 중 네비게이션에서 트윗 작성 하는 모달을 여니 거기에 업로드한 이미지가 떠 있었다.
어라...이거 뭔가 이상하다. 왜 다른 DOM에 파일이 연결되어 버리는걸까?

const fileInput = useRef();

//파일 업로드시 각 DOM 영역에 이미지 띄우기
const clickFileUploader = () => {
  fileInput.current.click();
};

<input
  name="file"
  type="file"
  accept="image/*"
  onChange={onFileChange}
  ref={fileInput}
  id="files"
  className="hidden"
  />
<div className="icon" htmlFor="files" onClick={clickFileUploader}>
  <FontAwesomeIcon icon={faImage} size="2x" />
</div>

• fileInput 객체의 current 속성 중 click() 메서드를 사용하면 현재 클릭된 fileInput 객체를 체크할 수 있다.
• label 태그를 사용하니 label 태그 클릭시 fileInput 객체가 있는 만큼 파일 업로더 창이 반복적으로 뜬다. div 태그로 바꿔주고 onClick 이벤트 리스너를 사용하여 현재 클릭한 파일 업로더만 뜰 수 있게 한다.

문제 해결! 드디어...🔥

📚 참고

• How to trigger INPUT FILE event REACTJS by another DOM | stack overflow
• [React] ref로 HTML 엘리먼트에 접근/제어하기 | Daleseo