레슨 6-2: ChatGPT로 앱의 사용자 화면 설정하기(사용자 이름과 비밀번호 입력 기능 구현)

이제 우리는 이 폼이 실제로 작동하도록 만들려고 합니다. 
사용자 이름과 패스워드를 연결하여 실제로 동작하는 기능을 추가하려고 해요. 
그럼 이제 시작해 볼게요.

먼저, 상태를 이용해서 시작해 볼게요. App.js 파일로 가야 해요. App.js에는 모든 내용이 있어요.
 우리는 상태를 가져와서 useState를 설정하고, 빈 문자열로 초기화할 거에요. 
아직은 아무것도 하지 않았지만, 이제 입력값들을 다루어볼게요.

입력값을 타이핑하면, 우리는 실제로 그 입력값을 설정하여 유저이름으로 갖도록 하려고 해요. 
그리고 여러분이 그것을 타이핑하면 현재 있는 값을 변경하여 업데이트되도록 하려고 해요. 
이를 위해 onChange 이벤트 핸들러를 사용할 거예요. 
우리는 유저이름 변경과 비밀번호 변경을 처리할 거예요. 하나는 유저이름에 적용하고, 
다른 하나는 비밀번호에 적용할 거예요.

그럼 이제 유저 이름 아래에 있는 input 요소에 value 속성을 추가해 볼게요.
value 속성은 {username}이 되도록 설정할 거예요.
이 username은 우리의 상태(state)에서 가져온 값이에요.
상태에 저장되어 있는 값이죠. 우리는 이 값을 변경하고 싶어요.

또한, 값이 변경될 때 사용할 onChange 핸들러를 만들 거예요. 
이 onChange, value, type은 모두 input 요소와 함께 사용되는 속성들이에요. 
리액트 폼을 사용하면 이러한 속성들을 간편하게 다룰 수 있어요.

이제 비밀번호도 동일한 방식으로 처리해볼게요. 
input 요소의 value를 password로 변경하면 돼요.
또한, 이 handleUsernameChange은 함수입니다. 
이 함수는 유저 이름이 변경될 때 호출되는 함수입니다.

그리고 이제 실제로 함수를 만들어야 해요. const handleUsernameChange라고 해줄게요. 
우리는 ES6 화살표 함수를 작성할 거예요. 
이 함수는 event를 작동시키도록 상수 함수를 만들려고 해요. 
화살표 함수는 함수 본문에서 값을 재정의하지 않아서,
 콜백을 이용하여 함수의 동작을 더 쉽게 예측할 수 있어요. 
그래서 우리는 이렇게 handleUsernameChange를 만들었고, 이제 우리는 setUsername이라고 해요.

지금 우리는 실제로 상태를 이용하여, 초기화된 상태를 변경할 거예요. 
그럼 우리는 상태를 빈 문자열에서 사용자 이름으로 변경하려면 어떻게 해야 할까요? 
우리는 입력된 값이 필요해요. 그 값을 어떻게 받을까요? 
event라고 하고, 우리는 target을 가져올 수 있어요. 
그리고 target으로부터 value를 원해요. 즉, 사용자 이름값을 원하는 거죠. 
그 후에 비밀번호에 대해서도 동일한 방식으로 처리하겠어요.

만약에 무슨 일이 일어나고 있는지 궁금하다면 Visual Studio Code로 돌아가서 
console.log(username)을 입력해보세요. 그러면 콘솔에 현재의 유저이름을 출력해줄 거에요.

그리고 만약에 우리가 F12를 누르고 Console 탭을 열면 개발자 도구를 사용하여 
실제로 무슨 일이 일어나고 있는지 확인할 수 있어요.
 만약 콘솔 창이 지저분하다면 console.clear()를 입력하여 기록을 지울 수도 있어요. 
이렇게 하면 콘솔 창이 깔끔해질 거예요.

왜 이렇게 되는 걸까요? 그 이유는 우리가 value를 타깃으로 설정하고 있고,
그게 무엇인지 실시간으로 로깅하고 있기 때문이에요. 이를 통해 우리는 로그에서 값을 확인하고 테스트해볼 수 있어요.

현재는 콘솔 창이 지저분할 수 있으므로 Visual Studio Code에서 있는 console.log(username)는 다시 지워주세요.
그리고 다시 리액트로 프런트엔드를 구축하는 방법을 보시면https://gptus.ghost.io/reseun-5-namanyi-siseutem-gucughagi/(참조 링크) 리스트 안에 있는 3. 컴포넌트 생성을 확인할 수 있어요. 

유일한 차이점은 여기서는 실제로 input 자체 안에서 타깃으로 
설정하는 모든 이벤트를 작성한 것이에요. 
우리는 개별적으로 작성했지만, 제 생각에는 별도로 하는 게 더 좋은 방식입니다. 
특히 코드를 더 추가해야 할 경우에는 그렇죠. 하지만 아래의 방식도 잘 동작합니다.