이미지 파일을 업로드하는 컴포넌트 만들기
- 클릭하면 파일 선택창이 뜨고 이미지 파일을 선택하면
미리보기가 보이도록 만들 예정
1. 폼을 다루는 input 만들기
선택할 파일 State를 담을 value State를 만든다.
2. handleChange라는 함수를 만든다.
이벤트 객체의 target.files를 통해서 파일을 가지고 올 수 있다.
3. ReviewForm 컴포넌트로 가서 FileInput컴포넌트를 추가해준다.
4. 콘솔로 확인해보기.
파일을 선택하면 콘솔창에는 FileList라는 객체가 출력이 된다.
0번 인덱스에는 내가 선택한 파일에 해당하는 객체가 있다.
이 객체를 사용하면 네트워크로 파일을 전송하거나
이미지 미리보기를 만들 수 있다.
files 프로퍼티에 0번 인덱스 값으로 nextValue를 만든다.
그리고 value State를 변경해준다.
input 태그에 value prop으로 value State를 넘겨준다.
오류가 발생한다!!
1. 비제어 input을 제어하려고 했다고 나온다.
file input은 반드시 비제어 input으로 만들어야 한다.
- dom로드에서 에러가 발생했다.
파일 인풋에서 value는 파일 이름을 받는데
자바스크립트에서는 빈문자열로만 설정이 가능하다.html에서 file input은 반드시 사용자만 값을 바꿀 수 있다.
자바스크립트로는 값을 바꿀 수 없다.
콘솔로 이벤트 target value를 출력해보면
실제 파일 경로가 아니라 fakepath라는 문자열이 출력된다.
보안을 위해 웹브라우저는 사용자의 파일 경로를 숨겨준다.
이런 특징때문에 file input은 value prop을 지정할 수 없고
반드시 비제어 컴포넌트로 만들어야한다.
value prop을 지워주면 오류없이 State가 잘 반영되는 것을 확인할 수 있다.
file input 컴포넌트에서 State대신에 props사용하도록 수정하기
file input의 State를 props로 바꾸고
ReviewForm 컴포넌트에 있는 State를 props로 내려준다.
props로 name, value, onChange를 받고
value State를 제거한다.
그리고 setter 함수 대신에 onChange를 name값과 함께 호출한다.
그리고 ReviewFrom 컴포넌트에서 ingFile이라는 프로퍼티를 추가하고
기본값을 null로 한다.
기존에 있던 handleChange 수정하기
FileInput 컴포넌트에서 onChange를 name과 value를 호출하였는데
이런 경우를 처리하기 위해서 좀 더 추상화된 함수를 만들 것이다.
F2키를 눌러서 handleInputChange라는 이름으로 변경하고
handleChange라는 함수를 새로 만들어준다.
handleChange함수는 name과 value를 파라미터로 받아서
기존에 사용하던 setter함수를 호출한다.
handleInputChange 함수에서는 handleChange를 호출해주면 된다.
마지막으로 FileInput컴포넌트에는
name으로 imgFile, value는 values.imgFile,
onChange prop으로는 handleChange를 넘겨준다.
파일을 선택하고 확인해보면 values State에 imgFile 프로퍼티가 잘 지정된다.
