이미지 파일을 선택했을 때 미리보기를 보여주도록 만들기
ObjectURL을 사용
파일 객체를 ObjectURL로 만들면 파일에 대한 주소를 만들 수 있다.
인터넷에 올린 파일 링크 값이 사용자 컴퓨터에 있는 파일을 주소로 사용할 수 있다.
1. FileInput 컴포넌트에 preview라는 State를 추가한다.
여기에 파일 미리보기 주소를 문자열로 지정할 것이다.
2. 미리보기를 보여줄 이미지 태그를 추가한다.
src속성은 preview로 넘겨준다.
3. useEffect를 활용해서 preview State를 변경한다.
useEffect를 사용하면 처음 랜더링한 다음에 비동기로 콜백함수가 실행되고
그 다음 랜더링부터는 디펜던시 리스트의 값이 바뀔 때만 콜백함수가 실행된다.
useEffect(()=>{
},[value]);이런 식으로 value prop을 디펜던시 리스트에 넣으면 value prop이 바뀔 떄마다
preview값을 변경해 줄 수 있다.
즉, 파일을 선택할 때마다 미리보기 주소를 바꾸는 것
4. ObjectURL 사용하기
value 값이 없는 경우에는 return해서 useEffect 콜백함수를 종료시킨다.
ObjectURL은 URL.createObjectURL이라는 함수로 만들 수 있다.
이 함수는 문자열을 리턴한다.
이 문자열은 해당 파일의 주소처럼 쓸 수 있는 값이다.
value값을 아규먼트로 넘겨주고 nextPreview라는 변수로 지정해준다.
이 값으로 State를 변경해준다.
5. 확인하기
리액트 개발자도구에서 파일을 선택하고 확인해보면
State에 "blob"으로 시작아는 임시 주소가 생성되는 것을 확인할 수 있다.
이것이 바로 ObjectURL이다.
ObjectURL을 만들면 웹브라우저는 메모리를 할당하고
파일에 해당하는 주소를 만들어준다.
파일 인풋 컴포넌트는
랜더링하는 과정에서 리액트 외부의 상황을 바꾸게 된다.
Side Effect
이런 식으로 컴포넌트에서 외부의 상황을 바꾸는 것을 사이드 이펙트 라고 한다.
앞에서 useEffect를 사용하여 fetch함수를 사용하여 리퀘스트를 보냈었다.
네트워크 리퀘스트도 일종의 사이드 이펙트이다.fetch함수는 값을 계산해서 리턴하는 것이 아니라
웹브라우저의 상태를 바꾸어서 네트워크 리퀘스트를 보내고 그렇게 받아온
리스폰스를 활용하기 때문이다.
리액트에서 사이드 이펙트를 사용하는 경우에 useEffect를 사용
네트워크 리퀘스트나 메모리 할당같이 컴포넌트 함수에서 외부의 상태를
변경할 떄 useEffect를 활용한다.
