6/20 <React> Input 박스 꾸미기. (type='file')

input박스를 내가원하는 방식으로 꾸미고싶었다.. 기본 input설정은 너무나도 투박하고... 뭐..그래요.. 홈페이지에는 너무 부적격한 이미지였다..

const [profile,setprofile] = React.useState("");

const UpImageUrl =  (e) => {

 setprofile(e.target.value);
}

return(
 <Inlabel htmlFor="files">사진 업로드</Inlabel>//Label태그로 id값을 files로 맞춰줬다..
 <Inex htmlFor="files">{profile}</Inex> //파일 경로를 나타내기위한 label태그 {profile}은 usestate의 초기값
**<Input2 type="file" id="files" 
ref={profile_ref} onChange={UpImageUrl} />** //내가원래 꾸미려고 했던 input 박스.

);


const Inex =styled.label`
border-radius: 4px;
  --saf-0: rgba(var(--sk_foreground_high_solid, 134, 134, 134), 1);
 
  transition: border 80ms ease-out, box-shadow 80ms ease-out;
 
  margin: 0 0 20px;
  width: 73.5%;
  color: rgba(var(--sk_primary_foreground, 29, 28, 29), 1);
  background-color: rgba(var(--sk_primary_background, 255, 255, 255), 1);
  padding: 12px;
  height: 44px;
  font-size: 18px;
  line-height: 1.33333333;
  text-overflow: ellipsis;
  overflow: hidden;
`

const Inlabel =styled.label`
    border-radius:4px;
    display: inline-block;
    padding: 10px 10px;
    color: #fff;
    vertical-align: middle;
    background-color: #999999;
    cursor: pointer;
    height: 24px;
    margin: 0 0 3px;
    margin-left: 5px;
`

const Input2=styled.input`
    display:none;
`

input박스를 꾸미기위해선 원래 input박스를 display: none으로 모습을 없에고,
원래 input박스 와 id값이 같은 label태그를 만들어주면 label태그가 파일선택 버튼 역할을 하게된다.
하지만 나는 거기에서 그치지않고 파일경로도 나타내 주는걸 원했기때문에 1개의 label태그를 더 추가하여 총 2개의 라벨태그를 주었고
1개는 파일선택버튼 1개는 파일경로를 나타내는 라벨로 설정했다.

경로를 나타내기위해선 onChange와 useState를 사용하여 나타내었다.

질문이있으시면 댓글로 남겨주세요!