파일찾기 기능 구현

내용

• 파일찾기 버튼 클릭시 파일을 찾는 박스가 실행됨
• 이미지를 선택후 열기를 클릭하면 해당 파일 이름이 라벨에 나타남

결과

코드

const [save, setSave] = useState('');

const App =() => {
  
  const saveImg = e => {
    const saveEvent = e.target.value;
    setSave(saveEvent);
  };

return(
          <Ul>
            <TitleBox>사진업로드</TitleBox>
            <PhotoSaveBox>{save}</PhotoSaveBox>
            <Lable htmlFor="file">
              파일찾기
              <File onChange={saveImg} />
            </Lable>
          </Ul>
	);
};

//style-component
const PhotoSaveBox = styled.div`
  height: 28px;
  border: 1px solid lightgray;
  border-radius: 3px;
  width: 34vw;
  margin-left: 5px;
  margin-right: -10px;
  padding-top: 10px;
  padding-left: 10px;
`;

const Lable = styled.label`
  background-color: #c4c4c4;
  height: 28px;
  padding: 8px 25px;
  border: none;
  letter-spacing: 0.5px;
  cursor: pointer;
`;

const File = styled.input.attrs({
  id: 'file', // htmlFor='file' 과 연동
  type: 'file',
  accept: 'image/png, image/jpeg',
})`
  display: none;
`;

설명

1. input type='file'의 default 값은 input 옆에 박스가 생성 또는 파일없음 이라는 글이 생기는 것이다.
   이 기본값을 display: none으로 없애준다
2. accept는 어떤 파일을 받아올건지 입력한다.
3. input에 onChange가 발생하면 saveImg 함수를 호출한다.
   saveImg함수에서는 이벤트를 인자로 받아서 saveEvent라는 변수에 event.target의 값을 저장한다.
   save state에 setSave를 이용해서 saveEvent로 바꿔준다
4. input 겉에 싸고있는 label에 스타일을 준다(photoSaveBox)
   input을 감싸고 있는 label에 htmlFor='file'을 이용해서 input과 연동시킨다.
5. label 겉에 싸고있는 div에 save를 넣어주면 선택된 파일의 이름이 저장된다.