SimCoding

[REACT] input[type="file"] 디자인 커스텀 하는 방법 , 파일이나 이미지를 업로드 하기 위해서 을 사용해야한다. 하지만 의 경우, 기본디자인이 정해져 있고 직접적으로 커스텀을 할 수 없다. 그렇다고 아이에 방법이 없는 것은 아니다. 직접적으로 커스텀 할 수는 없지만, 약간의 편법을 사용해서 간접적으로 디자인을 한 것처럼 보이게 할 수 있다. 과정은 다음과 같다. 1) input 태그를 안보이게 숨긴다. 2) 버튼으로 사용할 태그를 하나 만든다. 3) 버튼을 클릭 했을 때, input태그에 클릭 이벤트를 발생시킨다. 4) 버튼 디자인을 커스텀 해준다. 이게 무슨 말인지 코드를 통해 좀 더 자세히 알아보자. import React, { useRef } from "react"; const ..