React) label에 input 연결하기

이번 프로젝트에서는 내가 로그인, 회원정보수정, 마이페이지 부분을 담당하기로 했다.

그러던 중 프로필 사진을 클릭하면 프로피사진을 수정할 수 있게 하기로 했는데, 어떻게 하는지 몰라서 찾아봤다.

<div>
            <div css={imagewrapCSS}>
              <label htmlFor="profileImage">
                <Image css={imageCSS} src={profileimage} alt="프로필 이미지" />
              </label>
            </div>
            <input
              id="profileImage"
              type="file"
              accept="image/*"
              style={{ display: "none" }}
            />
          </div>

# emotion

const imageCSS = css`
  width: 100%;
  height: 100%;
  border-radius: 100%;
  cursor: pointer;
`;

label의htmlFor와 input의 id 를 동일하게 해 주면 가능하다!