사용자의 입력값을 추출하는
또 다른 방법을 배워 보겠습니다
이 방법은 복잡한 양식을 다룰 때
사용하기 좋습니다
더 복잡한 양식과
복잡한 양식 제출을 다루는 방법과
복잡한 양식에서 값을 추출하는 방법을 배우기 위해서
파일 중 Signup.jsx를 사용하도록 하겠습니다
이렇게 컴포넌트 폴더에 추가하면
이제 앱 컴포넌트에서
Signup.jsx로부터 Signup 컴포넌트를 가져올 수 있습니다
그러면, 이 Login 컴포넌트를
Signup 컴포넌트로 교체하겠습니다
그리고 import Login을 지우겠습니다
그러면 이제
화면에 있는 더 복잡해진 양식이 보이실 겁니다
복잡한 양식 제출을 관리하는 것도
간단한 양식을 관리하는 것과 같은 원리로 작동됩니다
handleSubmit 함수를 추가하고
onSubmit 속성과 연결하면 됩니다
이렇게 이벤트 객체를 얻게 될텐데
자동으로 생성되는 HTTP 요청이
전송되지 않도록 하기 위해서
event.preventDefault를 불러오겠습니다
이 모든 입력창에 있는
입력된 값들을 추출하는 것이 조금 어려울 수 있습니다
상태나 참조를 사용할 수는 있지만
전부 다른 상태값이나 참조를 일일이 설정하고 관리하는 것은
너무 비효율적인 작업입니다
그렇다면 적어도 이 값들을 얻기 위해
네이티브에 내장된 기능을
사용하는 것을 고려해 볼 수도 있습니다
실제로 브라우저는
양식 제출 관리와
입력된 값을 얻는 작업을 도와주는 역할을 합니다
브라우저에 내장되어 있는
특별한 종류의 constructor 함수로
특별한 종류의 객체를 만들 수 있습니다
그 함수는 바로
FormData constructor입니다
이 함수는 저나 리액트가 제공하는 것이 아니라 브라우저에 내장된 함수입니다
FormData는 양식에 입력된 각기 다른 값들을
쉽게 얻을 수 있도록 도와주는 객체입니다
FormData에 양식을 입력값으로 넣어 주겠습니다
그러려면
FormData에 event.target를 보내면 됩니다
이 이벤트 제출의 타겟은 양식입니다
양식이 제출된 것이기 때문입니다
결과적으로 FormData 객체가
양식에 있는 input에 추가된 모든 데이터로
접근할 수 있게 해줍니다
이게 제대로 작동하려면
여러분이 값을 추출하려는 모든 입력값들에
이름 속성이 설정돼 있어야 합니다
따라서 모든 입력창은
심지어 입력창이 아니라 select field 같은 다른 창일지라도
이름 속성을 가져야 합니다
모든 입력창이 그래야 합니다
그래야만 FormData가 작동하고
입력된 값에 접근할 수 있게 해줍니다
이제 이 FormData 객체를 사용해서
내장된 메소드 중 하나를 불러올 수 있습니다
예시로, get method를 불러옵시다
그러면 특정 이름에 대한 값을 추출할 수 있습니다
예를 들어, 여기에서
email이라는 이름을 가진 입력창의 값을 얻을 수 있습니다
즉, 이 입력창의 값을 얻는 것입니다
이 FormData 객체에서 get을 호출하면
입력된 이메일 주소를 얻게 됩니다
그리고 값을 추출해서 사용하면 됩니다
모든 입력창에 같은 작업을 반복할 수도 있습니다
비밀번호를 예시로 들겠습니다
입력된 비밀번호를 얻으려면 Password라고 쓰면 됩니다
하지만 이런 식으로 하면
여기에 너무 많은 코드가 존재할 것입니다
그래서 입력된 모든 값을 얻고
값들을 객체로 그룹화하기 위해서
자주 사용하는 방법은
브라우저에 내장된
Object 클래스를 사용하는 것입니다
그리고 Object 클래스에 fromEntries 정적 메소드를 호출합니다
그리고 FormData 객체를 여기로 보냅니다
FormData 객체에서 불러낸 Entry 메소드의 결과를
fromEntries 객체로 보냅니다
이상해 보일 수도 있지만, FormData 객체의 엔트리를 부르는 것은
모든 입력창와 그에 속한
값들의 배열을 제공합니다
그리고 그 배열에 있는 Entry로부터 Object를 불러내면
모든 입력창의 핵심 값들을 가지고 있는
객체를 얻을 수 있습니다
데이터를 console.log해서
'회원가입'을 눌러서 이 양식을 제출하면
여러 핵심 값들을 가지고 있는
객체를 얻은 것이 보이실 겁니다
이 양식에 있는 모든 입력에 해당하는 핵심 값입니다
이름, 성, 이메일, 비밀번호 등등이 있습니다
그렇지만 여기를 자세히 보시면
이 객체에서
입력창 하나가 빠져있습니다
빠진 입력은 바로 이 '저희를 어떻게 찾으셨나요?'입니다
이 입력은 여러 입력이 그룹화된 것입니다
이 질문은 체크 박스로 구성된 그룹입니다
체크 박스는 전부 같은 이름을 가집니다
왜냐하면 결국 우리가 얻고 싶은 것은
체크된 값들의 배열이기 때문입니다
그래서 사용자가
체크 표시를 한 박스의 값들과
이런 다양한 값이 있는 입력창은
Entry나 fromEntries를 사용할 때는 빠져있습니다
하지만 다행히도
직접 추출하고 저장해서 이것들을 다시 얻을 수 있습니다
예를 들어, 여기서 FormData getAll을 사용하여
acquisitionChannel을 얻을 수 있습니다
하나의 입력창에서 여러 값을 얻고 싶다면
이 방법을 사용하시면 됩니다
같은 이름을 가진 체크 박스를
여러 개 만든 경우 사용할 수 있을 것입니다
모든 체크 박스의 값을 얻으려면
getAll을 사용하면 됩니다
체크 박스 요소에 설정한 이름을 사용해야 합니다
저는 이름을 acquisition라고 해뒀습니다
이것을 getAll로 보내기만 하면 됩니다
이제 acquitisionChannel이 생겼습니다
여기에 새로운 속성을 추가해서
이 데이터 객체로 합칠 수도 있습니다
acquisition이라고 부르겠습니다
이것은 acquisitionChannel과 동일하고
이 anquisition input이
선택한 모든 값의 배열입니다
선택된 모든 값과 함께
acquisition 속성을 추가하고
console.log(data)를 입력한 뒤 저장하면
새로고침 하고, 여기서 두 개의 값을 선택했을 때
회원가입을 누르면
여기 acquisition 속성이 있는 것을 볼 수 있으실 겁니다
이 속성은 선택된 모든 입력창의 배열입니다
자, 그렇게 해서
FormData를 사용하는 방법은 꽤나 분명하면서도
사용자가 입력한 모든 값을 빠르게 얻을 수 있는 간단한 방법입니다
시간 절약도 많이 될 것입니다
따라서 양식 제출을 관리하고
사용자가 입력한 값을 얻고 싶을 때
이 방법은 꽤나
사용해 볼 만한 방법입니다
이제 다음 강의에서는
사용자 input을 검증할 때
사용하는 방법들을 배울 것입니다