양식(form)을 다루는 방법에 대해 배워봅시다
로그인 파일(Login.jsx)에서 작업할 것입니다
이 파일에서 이런 형태의
로그인 양식을 작업할 수 있습니다
제일 먼저
이 양식의 제출을 관리하는 방법과
각각의 값들을 추출하는 방법에 대해 배워보겠습니다
몇 가지 방법이 있는데
각각을 설명드리겠습니다
여러분이 선호하는 방법을 선택하셔서
앱 개발에 사용하시면 됩니다
이 양식에 입력된
이 레이블(label) 요소에
htmlFor라는 특별한 속성이 보이실 겁니다
htmlFor는 네이티브 html에서 설정하는
for 함수의 리액트 버전이라고 보시면 됩니다
이 파일이 .jsx가 아닐 경우에 한합니다
여기에서는 CSS 클래스를 추가할 때 className을 사용해야 하듯
for만 입력하는 것이 아니라 htmlFor을 입력해 줘야 합니다
class와 for은 둘 다 자바에서 사용하는 이름이기 때문입니다
따라서 여기에서는 속성의 이름으로 설정할 수 없습니다
이 점을 기억해 두시길 바랍니다
양식 제출을 관리하기 위해서는 결국
이 로그인 버튼이 눌리는 시점을 알아야 할 것입니다
이 리셋 버튼은 나중에 양식을 리셋하기 위한 용도입니다
이것은 나중에 배울 것입니다
우선은 로그인 버튼에 대해 알아봅시다
양식 제출을 관리하기 위해서는
로그인 버튼에 대해 알아야 합니다
여기 function Login에
새로운 함수를 추가해 보겠습니다
handleSubmission이나
handleSubmit이라고 이름을 붙여보겠습니다
원하는 이름을 사용하시면 됩니다
그러고 나서 이 함수를 로그인 버튼의
onClick prop의 값로 만들 수 있습니다
그러면 이 버튼이 눌릴 때마다
이 handleSubmit 함수가 요청됩니다
사용자가 입력한 데이터는
여기서 관리할 수 있습니다
데이터를 관리하기 위해서는
우선 데이터를 얻어야 할 것입니다
그전에
이 함수가 원하는 대로 요청되는지 확인해 보겠습니다
그러려면 여기에 console.log('Submitted!')을 입력합니다
간단한 console.log 메시지입니다
이걸 모두 저장한 후에 양식으로 돌아가서
개발자 도구를 열고 로그인을 누르면
제대로 작동하지 않는 것처럼 보입니다
로그인을 누르면 '제출됨' 메시지가 아주 순식간에 나타났다가
곧바로 사라져 버립니다
이런 일이 생기는 이유는
이 console.log가 페이지를 다시 로딩할 때마다
다시 새로고침 되기 때문입니다
즉 로그인을 누르고 나면
페이지가 다시 로딩된다는 의미입니다
그리고 실제로 그런 일이 일어납니다
여기 새로고침 아이콘을 보시면 알 수 있듯이
로그인을 누르면
X 표시가 잠깐 나오게 됩니다
또 여기에 낯선 주소가 추가된 것이 보입니다
바로 이 질문 매개변수에서 일어나고 있는데
이런 일이 발생하는 이유는
제가 양식 요소 안에 버튼을 넣었기 때문입니다
기본 상태의 브라우저에서
양식 요소에 있는 버튼은
양식을 제출하는 용도로 쓰입니다
즉, HTTP 요청이 발생하고
웹사이트의 서버로 전송되는 것입니다
이것이 기본적인 작동 원리입니다
이것이 기본인 이유는
리액트로 만들지 않은 앱에서도
풀스택 앱의 페이지는
서버에 의해서 렌더링 된 후에
클라이언트에게 전송됩니다
따라서 양식 제출은
서버로 다시 전송돼야 합니다
그러면 서버가 양식을 관리하는 것입니다
여기서도 같은 원리가 적용됩니다
Network 탭에 들어가서 삭제 버튼을 누르면
제가 로그인 버튼을 눌렀을 때
전체 페이지가 새로고침 되고
여기에는 새로 발생한
요청이 생깁니다
이 요청은 브라우저가 자동으로 보낸 것입니다
이렇게 기본 세팅이 되어 있는 것이
중요한 이유를 이해하셔야 합니다
이 로그인 버튼과 리셋 버튼
이같은 버튼들은 모두
양식 요소에서 요청을 발생시킵니다
그리고 그 요청을 바로
웹사이트의 서버로 전송합니다
그러나 리액트에서 작업할 때는
이것이 문제로 작용합니다
사실 리액트로 만드는 대부분의 앱들에서
이것이 문제로 작용합니다
물론 Next.js 같은 풀스택 리액트 방식을
사용하는 경우는 제외하겠습니다
이 내용은 다른 강의에서 다루겠습니다
이 기본 구성이 문제가 되는 이유는
이 웹 주소의 리액트 웹사이트를
관리하는 서버가
순수 개발 서버이기 때문입니다
즉 이 서버는 양식 제출을 위해
이를 관리할 수 있는
코드를 갖추지 않았습니다
이 리액트 앱을
인터넷상의 실제 사용자를 위한
진짜 서버에 배포하더라도
그 서버는 이 index.html 파일과
이 자바스크립트 파일들만
관리할 수 있을 것입니다
즉 여전히 새로 들어오는
양식 요청을 관리할 수는 없습니다
따라서 이 기본 구성이 문제가 되는 것입니다
그렇다면, 이 양식을 제출하는 버튼의
기본 구성을 막는 방법을 배워봅시다
우선
이 버튼에 type 속성(attribute)를 추가할 수 있습니다
그리고 이걸 "button"이라고 설정하겠습니다
type="button"이라고 설정해두면
버튼이 양식을 제출하지 않게 됩니다
왜냐하면 기본 유형(type)은 submit 유형이기 때문입니다
이렇게도 설정해 둘 수 있지만
권장드리지 않습니다
말씀드렸듯이, 그것이 기본값이기 때문입니다
type="button"으로 설정해두면
저장하고 새로고침을 눌렀을 때
여기서 로그인을 누르면 메시지가 계속 떠 있는 것을 볼 수 있습니다
페이지가 새로고침 되지 않는 것입니다
이 버튼이 다른 방식으로
작동하게 했기 때문입니다
이제 이 버튼이
양식을 제출하지 않도록 만든 것입니다
이것이 첫 번째 방법입니다
조금 더 정교한 다른 방법은
나중에 입력된 값들을 추출할 때도
도움이 되는 방법입니다
유형을 아예 설정하지 않음으로써
type="submit" 설정을 유지하겠습니다
그리고 여기 onClick을 없애고
여기 양식 요소에
onSubmit 속성을 추가하겠습니다
이 양식이 submit 이벤트를 발생시키는데
어떤 버튼을 눌러서 제출될 때마다
제출을 확인하고 반응할 수 있습니다
여기에서는 handleSubmit를 발생시키려고 합니다
그 이유는
이를 통해 우리가 자동적으로
이벤트 객체를 얻을 수 있기 때문입니다
이는 발생하는 모든 이벤트에 대해서 적용됩니다
즉 click, change, submit 이벤트
이 모든 이벤트에 해당됩니다
그런데 이 event 객체는
이 submit 이벤트로 받기도 하지만
preventDefault 메소드라는
새로운 메소드를 갖게 됩니다
이것이 하는 역할은, 그 이름처럼
브라우저의 기본 구성이 일어나지 않게 합니다
즉 이 HTTP 요청을 발생시키고
전송하는 기본 구성이 일어나지 않습니다
이것이 바로 리액트로 제작하는
많은 앱에서 보게 될 패턴입니다
양식에 있는 submit 이벤트를 듣고 나면
event.preventDefault를 부르고
거기에 실제 자바와 리액트의
이벤트 관리 로직을 사용합니다
그렇게 해서 이 방법을 사용하고
저장한 후 페이지를 새로고침 하면
로그인을 눌렀을 때 여기에 '제출됨' 메시지가 남게 되고
페이지는 새로고침 되지 않습니다
이것이 리액트 제작 앱에서
양식 제출을 관리하는 방법입니다
오늘은 양식 제출에 대해 배워봤습니다
무엇보다 중요한 것은
이 작업을 해야 하는 이유를 아는 것입니다
이제 작업을 해봤으니
다음 단계는
사용자가 입력한 값을 가지고
값을 검증하는 것입니다
이것은 나중에 해보겠습니다
사용자가 입력한 값을
HTTP 요청으로 모을 수도 있습니다
그리고 이를 백엔드로 전송할 수도 있습니다
리액트로 제작하는 앱에서
HTTP 요청을 전송하는 작업도 당연히 가능합니다
데이터 fetch 강의에서 배웠듯이
보통 HTTP 요청은 개별 코드를 작성하여
백엔드로 독립적으로 전송됩니다