React) 이미지/파일 업로드 버튼 커스텀

에서 파일 업로드 버튼을 만들었는데 너무 밋밋하고 버튼 이름을 커스텀할 수 없다. 

업로드 버튼을 커스텀 하려면 기존의 <input>태그를 숨긴 뒤, 새로만든 버튼에 연결해야 한다.

 

 

1. 기존에 만든 <input> 에 ref 추가

<input 
  className="image_input"
  ref = {fileRef}
  type='file'
  id='image'
  accept='image/*'
  name='image'
  onChange={addImage} 
>
</input>

//ref를 사용하기 위해 useRef()라는 Hook함수를 사용한다. 
const fileRef= useRef();

*ref 란? 

리액트에서 DOM에 이름을 붙이는 것. ref로 지정해둔 fileRef를 통해서 해당 함수를 실행할 수 있다. 

 

 

2. CSS파일에서 해당 input태그 숨기기

.image_input {
   display: none;
 }

 

 

3. 새로 커스텀 버튼 만들기

<button onClick = {connectUploadButton}>그냥 일단 만들어봐!</button>

 

 

4. 버튼에 연결된 함수 만들기

   이 함수는 ref로 <input>과 연결되있어서 input태그를 대신 누르게 된다. 

const connectUploadButton = (e) => {
  e.preventDefault();
  fileRef.current.click();   // 버튼을 대신 클릭.
}