여기서 사용자가 입력한
그 값에 접근하는 방법은
useState를 사용하는 것입니다
그럼, 리액트의 useState 훅을 사용해 보겠습니다
그렇게 하면 각 입력창마다
상태를 설정하거나
하나로 결합하는 상태를 설정해서
객체 안에 상태 값 전부를 저장할 수 있습니다
두 가지 방법 모두 가능합니다
저는 상태를 여러 개 입력하겠습니다
enteredEmail을 입력하겠습니다
상태 업데이트 함수인 setEnteredEmail도 입력하겠습니다
그리고 여기 입력할 두 번째 상태는
로그인 폼에서 우리가 enteredPassword를 저장하는 상태입니다
그럼 여기에 enteredPassword를 입력하고
setEnteredPassword도 입력하겠습니다
이렇게 상태 두 개를 설정할 수 있습니다
이처럼 초기의 상태는 언제나 비어있습니다
그러면 입력창에 입력된
텍스트 없이 시작하는 것입니다
이제 리스너(listner) 변경을 설정해 보겠습니다
새로운 함수로 handleEmailChange를 입력하겠습니다
그러면 리액트가 자동으로 전달해 주는
이벤트 객체를 얻을 수 있습니다
그리고 이 함수를 이메일 입력의
onChange 속성의 값으로 설정하겠습니다
그렇게 하면 handleEmailChange가 이 input과 연결됩니다
그러면 input에서 값이 변경될 때마다
이 함수가 작동됩니다
예를 들면 키보드를 누를 때마다 함수가 작동합니다
그리고 이제 여기에 setEnteredEmail을 입력하고
값을 event.target.value로 설정합니다
이 이벤트의 타겟은 여기 있는 입력창이고
이 입력창을 나타내는 객체는
현재 입력된 값으로 접근하게 해 주는
값 속성을 가지고 있습니다
그러면 이제, 값을 input에 다시 넣어 보겠습니다
value 속성을 설정하고
다른 상태 값과 동일하도록 설정합니다
그럼 여기에 있는 초기 값을
이 입력창의 시작에서
보이는 값으로 설정한 것입니다
그리고 사용자가 입력값을 추가할 때마다
바로 여기에
반영됩니다
이 방법은
이전 강의에서 이미 배운 내용이기도 합니다
그렇게 저장을 하고 나면
여기에 값을 입력해도 정상적으로 작동합니다
그리고 이제 handleSubmit 함수에 있는
그 상태도 사용할 수 있습니다
예를 들어, console.log('User email:')을 입력하고
아웃풋으로는 enteredEmail을 설정하겠습니다
이 상태로 저장을 하면
여기에 이미 이메일 주소를 적어 뒀는데
로그인을 누르면 이렇게 출력값이 나타납니다
이 방법으로
사용자가 입력한 값을 모을 수 있습니다
그러면 이제
두 번재 함수인 handlePasswordChange를 설정해보겠습니다
똑같은 방법을 비밀번호에 적용하면 됩니다
event.target.value라고 입력하겠습니다
만약 각 입력값마다
따로 관리 함수를 만들려고 한다면
입력이 많은 복잡한 폼을 만드는 경우에
관리 함수가 너무 많아질 것입니다
또 상태 스냅샷(snapshot)도 너무 많을 것입니다
개별 상태 스냅샷 대신에
하나로 결합시키는 상태를 사용할 수도 있습니다
그러면 여기서
enteredValues 상태를 설정할 수 있을 것입니다
물론 이름은 자유롭게 정할 수 있습니다
그럼 객체 하나만 사용하거나
여러 값의 배열을 사용할 수 있는데
저는 객체 하나를 사용하겠습니다
이메일 속성이나
비밀번호 속성을 입력할 수 있을 것입니다
속성 이름 역시 자유롭게 정하시면 됩니다
처음에는 이렇게 빈 상태로 설정합니다
그러고 나서는 일반적인
이벤트 관리 함수를 설정하겠습니다
예를 들어, handleInputChange 함수를 설정하겠습니다
이 함수는 setEnteredValues를 호출하고
입력된 값 중 하나를 업데이트합니다
그래서 이 handleInputChange 함수는
이벤트를 얻는 것뿐만 아니라
이벤트가 발생한 입력값의
식별자도 얻을 수 있습니다
그러면 상태 업데이트 함수라고 부르는 이 함수 폼을 사용하여
입력된 값 상태를
즉 SetEntered 상태를 업데이트할 수 있습니다
이 함수를 상태 업데이트 함수로 넘기는 것입니다
그러면 이전의 상태 스냅샷을 얻을 수 있고
새로운 상태 스냅샷을 반환할 수 있습니다
새로운 객체는
자바가 알아보기 쉽도록 중괄호로 넣고
그러면 객체를 바로 반환하고 싶다는 의미가 됩니다
이 소괄호는
함수에 속하는 것이 아니라
객체 값을 만드는 역할을 합니다
그러면 스프레드 연산자를 사용해서
이미 존재하는 핵심 값들을 붙여 넣습니다
이 두 개의 필드 중에 하나만 업데이트할 것이기 때문입니다
물론, 현재 값이 입력돼 있는
다른 필드는 사라지면 안 됩니다
그러면 이 식별자가 식별한 필드를
업데이트합니다
이때 자바 구문(syntax)을 사용해서
객체 속에 있는 속성에
더 자유롭게 접근할 수 있습니다
여기 대괄호를 입력하면 됩니다
그리고 속성 이름을 보유하고 있는
변수나 매개변수를 입력합니다
이 대괄호 사이에 입력해야 합니다
그러면 속성 이름이 변수이나
매개변수에 저장된 속성을
자유롭게 설정할 수 있습니다
그리고 속성 이름 뒤에 항상 입력하는
콜론을 넣어줍니다
그리고 나서 속성 이름 안에 저장되어야 하는 값을
설정해 줍니다
예를 들면, event.target.value라고 입력하겠습니다
이렇게 해서 더 일반적으로 사용할 수 있는
관리 함수를 만들어 봤습니다
물론, 이 함수를 입력값들과
연결해야 할 것입니다
onChange의 값으로만
설정하면 안 됩니다
왜냐하면 리액트가 이 함수를 불러올 때
우리에게 필요한 이 식별자을 주지 않기 때문입니다
리액트는 그렇게 작동하지 않습니다
그래서 handleInputChange를 어떻게 불러낼지
고민해 봐야 합니다
이전 강의에서 배웠듯이
이것을 익명 함수로 넣으면
이 익명 함수가
값으로서 onChange에 전달됩니다
그러면 리액트가 실행시킬 수 있습니다
따라서 이 익명 함수가
입력값으로 이벤트객체를 얻는 것입니다
이 익명 함수에서
handleInputChange를 어떻게 불러낼지 설정할 수 있습니다
뿐만 아니라
여기 상태에서 타겟으로 삼은
속성 입력의 식별자가
최초의 매개변수로서 handleInputChange에 전해질 수 있습니다
그러면 이 식별자는 정해진 것입니다
이 이메일 입력의 식별자는 email입니다
여기에 email이라고 입력함으로써
이메일을 여기 식별자로 얻을 수 있습니다
email이라고 이름을 설정해서
이 email 속성을 설정할 수 있게 됩니다
이메일을 handleInputChange에 첫 번째 인수로 추가해서
얻을 수 있는 효과입니다
두 번째 인수는
제가 지금 handleInputChange로 넘기고 있는
바로 이 이벤트입니다
그렇게 해서 이 코드를 간소화하고
handleInputChange에서는
이벤트 객체가 아니라 값을 얻을 수 있습니다
값은 여기서 직접적으로 정할 수 있습니다
여기서 handleInputChange를 호출하면
위에 있는 값을 추출하게 됩니다
즉, 이 값이 두 번째 인수로
handleInputChange에 전해지는 것입니다
이 값을 input에도
넣을 수 있습니다
이를 통해 enteredValues 상태에 접근해 보겠습니다
그리고 email 속성에 접근해 보겠습니다
이것이 현재 입력된 값들을 가지고 있기 때문입니다
여기서 쓸 코드는 enteredValues.email입니다
이것이 일반적으로 사용할 수 있는
handleInputChange 함수의 사용법입니다
이 코드를 복사해서
비밀번호 input에 붙여 넣겠습니다
식별자를 email에서 password로 고치고
여기도 enteredValues.password로 바꿉니다
이것만 바꾸면
두 개의 입력값에
이 변화 제어 함수를 사용할 수 있습니다
그러면 이 핸들 변경 함수들은
지워도 됩니다
하나로 결합된 이 함수만 사용하면 됩니다
handleSubmit에서 입력된 값을
출력값으로 보고 싶으면
output에 enteredValues 상태를 입력하면 됩니다
이렇게 입력한 후
저장하고 새로고침 하면
여기에 이메일 주소와 비밀번호를 입력하고
로그인을 눌렀을 때
여기 오른쪽에 데이터가 출력값으로 나온 것을 볼 수 있습니다
그리고 입력한 값들이
여기 console에서 보입니다