useState로 값을 추출하여
사용자 입력을 관리할 수 있습니다
로그인 컴포넌트를 복사하여 여기에 붙여 놓고
파일 이름을 StateLogin이라고 바꾸겠습니다
이 파일의 입력 추적을 위해 useState를 만들면서 사용했던 코드를 계속 사용할 겁니다
그리고 Login.jsx 파일에서는
상태 코드를 지우겠습니다
handleSubmit은 그대로 두고
상태 코드와 변화 제어 함수만 지우겠습니다
입력 요소에 있는 onChange와 값 속성도 지우겠습니다
그 이유는
사용자 입력을 관리하는 다른 방법을 배울 것이기 때문입니다
다른 방법은 참조(ref)를 사용하는 것입니다
이전 강의에서
이 방법에 대해 배웠습니다
여기에 이메일 참조와 비밀번호 참조를 입력하겠습니다
이렇게 참조 두 개를 만들고, 이 참조 값들을
입력창과 연결할 겁니다
모든 HTML 요소에서 설정될 수 있는 특별한 참조 속성을 추가해서 연결하겠습니다
리액트에서도 모든 요소에 이 참조를 설정할 수 있습니다
참조에 대해서는
관련 강의에서 더 자세히 배울 수 있습니다
여기서는 이렇게 참조를 설정하고
이메일 입력창을 위해 참조를 email로 설정합니다
이것이 첫 번째 참조이고, 비밀번호 필드를 위해서는
참조를 password로 설정합니다
이렇게 참조 속성을 설정함으로써
이 DOM 요소 간에 연결 관계가 생기게 됩니다
이 입력 요소와 이 참조간의 연결 관계입니다
이 연결 관계를 예를 들면
handleSubmit에서 사용할 수 있습니다
이 관계를 사용하여 입력된 이메일을 얻을 수 있는데
email.current에 접근하기만 하면 됩니다
항상 참조 객체에 있는 current 속성에 접근해야 합니다
이 current 속성이
실제로 연결된 값을 가지고 있기 때문입니다
그래서 이메일과 비밀번호의 경우에는
입력 객체 값이 될 것입니다
그리고 그 값은 여기에 저장된
이 input DOM 요소이기 때문에
그 객체에서 값 속성에 접근할 수 있습니다
모든 입력 DOM 요소 객체는
이러한 값 속성을 갖게 되기 때문입니다
입력된 비밀번호에 대해서도 같은 방식을 사용할 수 있습니다
그러면 password.current.value에 접근하면 됩니다
그렇게 하면 이 값들과
출력값인 입력된 이메일과 비밀번호를 사용할 수 있습니다
이대로 저장하고 새로고침을 하면
다시 이메일과 비밀번호를 입력하고, 로그인을 눌렀을 때
여기에서 그 값들을 얻게 됩니다
이렇게 해서 값들을 얻는 또 다른 방법에 대해
알아봤습니다
이 방법의 장점은
상태를 사용하는 것보다
코딩이 더 적게 필요하다는 점입니다
우리가 입력 요소에 변화 제어 함수나
onChange나 값 속성을
추가하지 않았던 것과 같은 경우입니다
그저 참조를 반들어서 참조 속성과 연결해서
값을 추출하기만 하면 됩니다
이 방법의 단점은 값을 깨끗하게 재설정하는 것이
조금 어렵다는 것입니다
실제로 DOM을 다룰 때 참조를 사용하기가 까다롭습니다
이렇게 값을 재설정하는 것이 가능은 하지만
권장하는 방법은 아니고
사용하더라도 신중을 다해야 합니다
만약 복잡한 양식을 가지고 있다면
많은 참조를 만들어야 할 것입니다
그리고 참조를 하나하나 연결해야 할 것입니다
많은 입력 요소를 다루는 상황이라면
이 과정은 조금 번거로울 수도 있겠습니다