(실습) 사용자 정보 입력 받기

(실습) 성별 필드 추가하기

SignUp.jsx 파일을 다음과 같이 수정합니다.

• gender라는 이름의 state 가 추가되었고
• 성별을 입력받기 위한 <state> 태그가 추가 되었습니다.
• <select> 태그에는 총 두 가지 옵션이 들어가 있는데, <select> 태그의 값이 변경되면 이를 처리하기 위해 handleChangeGender() 라는 이벤트 핸들러를 만들어 사용하고 있습니다.
  여기에 이름을 입력하고 성별을 선택한 뒤에 제출 버튼을 누르면 아래와 같이 대화 상자가 뜨고 그 안에 방금 입력한 이름과 성별이 들어가 있는 것을 볼 수 있습니다.
  

이 장에서는 리액트의 제어 컴포넌트와 이를 이용해서 사용자의 입력을 받는 방법에 대해 배웠습니다. 최근에 나오는 대부분의 웹 애플리케이션은 단독으로 작동하기보다 사용자의 입력을 통해 상호작용하는 기능이 있는 경우가 많습니다. 그렇기 때문에 사용자의 입력을 받는 방법에 대해서 잘 숙지하고 다음 장으로 넘어가도록 합시다.