React - input 파일 업로드를 꾸며주자! 2탄 - useRef

useRef를 사용하여 input type=file 을 꾸며주거나 다른 태그(button 태그 등)로 옮겨서 관리할 수있다.

const imageInput = useRef();

const onClickInput = () => {
imageInput.current.click();
}

<input type="file" accept="image/*" ref={imageInput} />
<button onClick={onClickInput}>이미지 선택하기</button>

1. useRef를 활용하여 imageInput을 지정하였다.
2. ref={imageInput}을 input 태그 안에 작성하여 input 태그를 이제 imageInput으로 사용할 수 있다.
3. 함수 onClickInput을 선언한다.
4. 선언한 함수를 input 아래의 버튼에서 click 이벤트 시 호출 되도록 지정한다.
   (단, input태그는 꼭 display:none을 지정해주어 못생긴 녀석을 없애자!)

위의 과정을 거치면, 다음과 같은 순서로 이벤트가 발생되는데,

click이벤트가 button 태그에서 발생 -> onClickInput함수가 실행 -> onClickInput 함수에 의해서 input태그에 클릭이 전달.