React - Image file 업로드

01.Input type = file

const UserLabel = styled.label``

<ModalHead>
  <UserLabel htmlFor="UserImg">
  	<UserIcon src={ImageFile} />
   </UserLabel>
   	<input
    	type="file"
        accept="image/*"
        id="UserImg"
        style={{
        display: "none",
	}}
/>

• <input type="file">를 이용해 파일 업로드 버튼을 만들어준다.
• accept='image/*' 속성을 넣어서 image 확장자만 선택적으로 업로드하도록 해준다.
• input을 숨겨버리기 위해 display: none; 속성을 준다.
• <UserLabel /> 컴포넌트를 label 컴포넌트로 만들어 준다.
• UserLabel컴포넌트의 htmlFor속성의 값과 input태그의 id속성 값을 서로 일치시킨다.

labelFor

• html에서는 label과 input을 연결할 때 label에는 for속성, input에는 id속성을 통해 둘이 같다는 의미를 표시한다.
• 하지만 React에서는 for속성을 for문으로 의미하기 때문에 htmlFor이라는 속성을 사용해야 한다.

<!--HTML-->
<label for="forName"></label>
<input id="forNmae" />

<!--JS 내 HTML-->
<label htmlFor="forName"></label>
<input id="forName />