[REACT] input[type="file"] 디자인 변경 하는 방법

[REACT]  input[type="file"] 디자인 커스텀 하는 방법 , 

---

파일이나 이미지를 업로드 하기 위해서 <input type="file"> 을 사용해야한다.

하지만 <input type="file">의 경우, 기본디자인이 정해져 있고 직접적으로 커스텀을 할 수 없다.
그렇다고 아이에 방법이 없는 것은 아니다. 

직접적으로 커스텀 할 수는 없지만, 약간의 편법을 사용해서 간접적으로 디자인을 한 것처럼 보이게 할 수 있다.

과정은 다음과 같다.

 

1) input 태그를 안보이게 숨긴다.

2) 버튼으로 사용할 태그를 하나 만든다.

3) 버튼을 클릭 했을 때, input태그에 클릭 이벤트를 발생시킨다.

4) 버튼 디자인을 커스텀 해준다.

 

이게 무슨 말인지 코드를 통해 좀 더 자세히 알아보자.

import React, { useRef } from "react";

const App = () => {
  // useRef를 이용해 input태그에 접근한다.
  const imageInput = useRef();
 
  // 버튼클릭시 input태그에 클릭이벤트를 걸어준다. 
  const onCickImageUpload = () => {
    imageInput.current.click();
  };
  
  // input태그는 display:"none" 을 이용해 안보이게 숨겨준다.
  return (
  	<>
      <input type="file" style={{ display: "none" }} ref={imageInput} />
      <button onClick={onCickImageUpload}>이미지업로드</button>
	</>
  );
};

export default App;

이렇게 하면 버튼을 눌렀을 때, input태그를 누르는 효과를 낼 수 있다 !

이제 버튼을 본인의 취향에 맞게 디자인 하면 된다.