파일 인풋 초기화하기
파일 인풋의 value 속성은 사용자만 직접 바꿀 수 있고
자바스크립트로 바꿀 때는 빈 문자열로만 바꿀 수 있다.
value 속성을 빈 문자열로만 바꾸어주면 선택한 파일이 초기화된다.
이것을 이용하여 파일인풋을 초기화하는 버튼 만들기
FileInput 컴포넌트에서
input태그에 div태그로 감싸고
안에 초기화버튼을 하나 만들어준다.
value의 값이 있는 경우에만 랜더링할 것이기 때문에
조건부 랜더링으로 처리해준다.
그리고 버튼을 클릭했을 때 실행할 handleClearClick이라는 함수를 만든다.
여기서 inputRef을 사용한다.
inputRef의 current 프로퍼티의 값으로inputNode라는 변수로 지정해준다.
만약 inputNode의 값이 없는 경우에는 함수를 종료하도록 리턴해주고
inputNode의 value값을 빈문자열로 지정해서 초기화한 다음
onChange함수는 null값으로 호출해준다.
이렇게 하면 부모 컴포넌트(name)에서는 이미지 파일의 값이 null로 변경된다.
마지막으로 초기화 버튼에다가 onClick헨들러로 handleClearClick를 내려준다.
확인
처음에는 초기화버튼이 안보이다가 파일을 선택하고 나면 초기화버튼이 생겨나고
리액트 개발자도구로 State를 확인해보면 imgFile 프로퍼티에 값이 잘 지정된다.
그리고 초기화버튼을 누르면 파일인풋의 값이
초기화되면서 State의 값도 null로 잘 변경된다.
