REACT_이미지 파일 미리보기 기능 만들기

이전에 만든 프로필 이미지 미리보기에 기능을 입혀보자
우선 서버로 보내기전에 이미지파일을 받아 url형식으로 바꿔주어야한다.
html img 속성에서 src 부분에 이 url을 넣으면 화면에 이미지를 뿌려줄 수 도 있다.
이미지를 입력받아 화면에 띄워보자(새로고침하면 없어짐)

JSX

<div className="filebox">
   <label htmlFor="file">업로드</label>
   <input type="file" id="file" onChange={handleChangeFile}/>
</div>

input 타입을 file 로 하면 파일을 입력 받을 수 있는 버튼이 나온다.
label과 id 값을 일치시켜 css를 디자인 할 때 촌스러운 기본디자인을 버리고 새롭게 태어나보자. input의 onChange속성을 줘서 파일을 입력받았을때 어떻게 할 지 정할 수 있다.
handleChangeFile 이란 함수를 하나 만들어서 파일을 입력받았을 때 이미지를 바꾸는
기능을 만들어보자.

CSS

.filebox input[type="file"] { / 파일 필드 숨기기 /
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip:rect(0,0,0,0);
border: 0;
}

이렇게 주면 기존의 디자인 대신 .filebox label 의 디자인을 따라간다.

React부분

const [userImage,setUserImage] = useState(기본이미지URL);
const handleChangeFile =(e)=>{
        let reader = new FileReader();
        if (e.target.files[0]){
            reader.readAsDataURL(e.target.files[0]);
        }
        reader.onloadend = () =>{
            const resultImage = reader.result;
            setUserImage(resultImage)
        };


    }

e.target.files[0] 을 찍어보면 우리가 불러온 파일에 대한 정보를 볼 수 있다.
FileReader를 사용해서 이 파일을 URL형식으로 변환하자.
FileReader의 readAsDataURL을 사용하면 화면에 출력가능한 URL형식으로 변환된다.
onloadend는 파일을 성공적으로 읽어왔을때 실행되는 함수이다.
result에 아까 URL형식으로 바꾼 내용이 담겨 있기 때문에 이를
useState로 관리하는 userImage에 넣어주자.
원래 userImage 에는 아무사진도 선택하지 않았을 시 나오는 기본 이미지가 담겨있었다.
이를 setUserImage로 입력받은 파일의 URL로 바꿔주면 된다.

실제 사용 예시