Customizing <input> tags

Churro.·2022년 3월 5일
0

input 태그 커스터마이징하기

이거에서

이걸로

바꾸고자 한다.
이를 위해서는 input tag customizing이 필요하다.

Code

이거에서

<div>Change profile</div>
     <form type="file" name="img" encType="multipart/form-data" className="flex items-center">
       <label htmlFor="file-upload-button" className="border-ducks-gray-666 border border-solid w-90 h-32 ">
         Choose File
         <input type="file" name="img" id="file-upload-button" onChange={fileChangeHandler} style={{ display: "none" }} />
       </label>
     </form>
       <OrangeBtn callback={onSubmitHandler} text="Save"></OrangeBtn>
</div>

input 태그 클릭의 유효범위가 헷갈려서 구글링을 해보았다.
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=haakuz&logNo=221341716499

이걸로

<form type="file" name="img" encType="multipart/form-data" className="flex flex-col items-center">
    <label htmlFor="file-upload-button" className="flex flex-col border border-solid w-140 h-60 mt-18 mb-18 p-2 rounded-16 items-center text-ducks-blue-6667ab bg-white hover:bg-ducks-blue-6667ab hover:text-white cursor-pointer">
        <FiUpload className="flex flex-col" />
              Change Profile
            <input type="file" name="img" id="file-upload-button" onChange={fileChangeHandler} style={{ display: "none" }} />
     </label>
 </form>
     <div className="w-92 h-92 ml-90">
         <OrangeBtn callback={onSubmitHandler} text="Save"></OrangeBtn>
     </div>

(Tailwind CSS를 사용했고, OrangeBtn은 타 파일에서 불러온 컴포넌트이다.)


Error Handling

htmlFor

https://helloinyong.tistory.com/275
블로그에서는 다들 <label for 로 하라고 했는데 내 경우에는 <label htmlFor로 써야 에러가 생기지 않았다.
react 상의 문제인지, eslint 에러인지?

"label태그의 htmlFor와 input태그의 id가 같아야 한다"가 포인트 !

이걸 빨리 깨닫지 못해서 시간 좀 걸렸다.

<label htmlFor="file-upload-button" 
<input id="file-upload-button"

input을 안보이게 설정하기

<input style={{ display: "none" }}

Input태그에 fileChangeHandler가 작동한다. 여기서 포인트는, input 태그는 customizing이 힘들기 때문에, label태그를 input태그와 같은 기능을 하게 하고, input태그는 안보이게 하고 label 태그를 customizing 해주면 된다는 것이다.

Result

버튼을 약간 더 밸런스 맞게 수정했다.
파일 업로드 기능이 잘 적용되는 것을 볼 수 있다.

추가적으로는, 프로젝트 리팩토링을 하면서, 이미지 미리보기 기능도 구현해보고자 한다.

profile
I, sum of records.

0개의 댓글