사용자 입력을 가져오기 위한
몇 가지의 전략들을 배워봤으니
다음 단계는 해당 입력값이 정확하고
우리가 필요로 하는 모든 데이터를 갖추고 있는지를
확인하기 위한 검증을 다루겠습니다
다음 강의에서 이 부분에 대해 탐구해보기 전
이러한 양식(form)을
어떻게 리셋시키는지 잠시 짚어 보고자 합니다
이 양식의 경우, 보시면
이렇게 리셋 버튼이 있습니다
이 양식에 있는 입력창 중 제가 원하는 곳에
값을 입력하고 난 뒤
이 리셋 버튼을 클릭하게 되면
양식은 초기화되고 해당 입력값은 없어집니다
이 양식에서 이러한 기능이 구현되는 것은
해당 리셋 버튼의 유형(type) 속성이 reset 으로 설정되어 있기 때문인데
이것은 우리가 사용할 수 있는 빌트인 속성 중의 하나입니다
보시면 button, submit, reset 등이 있고 그중 기본인 submit은
양식을 제출하는 기능을 갖추었고
버튼은 우리가 앞서 알아본 값인데
해당 속성으로 인해 이 버튼이
양식을 제출하지 않고 다른 기능도 실행치 않는
단순히 버튼으로서의 기능만을 하도록 하는 것입니다
그러므로 해당 양식을 초기화시킬 버튼이 양식에 있다면
여러분이 선택해야 할 값은
마지막 값인 reset인 것입니다
이것이 리셋을 하는 방법 중 하나입니다
또다른 방법은 프로그래밍을 이용한 초기화입니다
여러분이 상태로 입력을 관리하고 있다면
간단히 해당 상태값을 초기화 시킬 수 있습니다
예를 들어 앞서 작업한 StateLogin 컴포넌트에서
setEnteredValues 명령을 이용해
우리가 초기 상태값으로 사용한 객체에 특정 값을 설정할 수 있는데
이렇게 email과 password의 값을 빈 문자열로 두게 되면
해당 값이 그 입력에 설정되어 있기 때문에
이러한 상태 값이
그 곳에 반영됩니다
이것이 상태를 통해 값을 관리할 때
입력값을 초기화 시킬 수 있는 방법입니다
참조(ref)를 이용해 입력된 값을 얻고자 하는 경우에는
연결된 입력 요소의 값 속성을
빈 문자열로 직접 설정함으로
입력을 초기화 시킬 수 있습니다
다만 이것은 조심스럽게 사용해야 할 방식입니다
그 이유는 사실, DOM의 업데이트는
리액트가 맡아 하도록 두는 것이 일반적이기 때문입니다
여기에 보시는 것과 같이
강제적인 업데이트나 변경은 하지 않는 것이 좋습니다
작은 업데이트뿐일지라도
DOM을 업데이트 하는 것이기에
추천드리지는 않습니다
참조를 사용할 경우에는
양식을 초기화 시키기에 더 용이한데
이는 값의 추출을 위해 외부 데이터 접근법을 사용할 때
초기화를 진행할 수 있기 때문입니다
여기 handleSubmit 함수에서
이 이벤트 함수를 가져올 수 있는데
앞서 이미 말씀드렸듯
이 이벤트의 목표는 기저의 양식 요소입니다
그리고 이 양식 요소는 호출할 수 있는
reset 메소드를 가지고 있습니다
이 것은 결국 제가 했던 것처럼 이 버튼의 유형을
reset으로 설정하는 경우와 같습니다
그러므로 event.target에 reset을 호출하는 것은
해당 양식을 비우는 또다른 방법인 것입니다
물론, 솔직히 말하자면
이 또한 강제적인 코드라고 볼 수 있지만
최소한 단계별로 참조 값을 하나하나
빈 문자열로 설정하는 것에 비해
작성해야 할 코드가 줄어듭니다
그것이 바로 여러분이 직접 참조 값을 초기화 시키는 대신
이 event.target.reset 코드 사용을 선호해야 할 이유입니다
그러면 이제
여기 양식을 제출하고 회원가입을 클릭하면
양식이 초기화 되는 것을 확인할 수 있는데
여기 reset을 호출했기 때문입니다
사실 저는 여기에서 양식을 초기화 시키고 싶지 않습니다만
어떻게 하는지를 여러분이 알아두셔야 하므로
이번 시간에 보여드렸습니다
이제 유효성 검증으로 넘어갈 준비가 되었습니다