이제부터 해야 할 것은
이 Player 컴포넌트가 제대로 작동해서
여기서 이름을 설정할 수 있도록 하는 것입니다
그래서 이 'unknown entity'(알 수 없는 사용자)가
제가 여기 입력한 값으로 대체되는 것입니다
그럼 일단 이 기능을
refs(참조)를 쓰지 않고 구현해보겠습니다
그러니까 우리가 이미 배운 기능들만 사용해서 말입니다
그러면 물론 useState를 사용해야 합니다
그게 이전 강좌들에서 비슷한 문제를 해결할 때 썼던 방식입니다
useState 훅을 사용하기 위해서는
useState를 리액트로부터 import해야 하고
그리고 여기서
빈 문자열을 기본 state(상태)로 등록하고
이 배열을 돌려받는데, 예를 들어
enteredPlayerName과 상태 업데이트 함수인
setEnteredPlayerName과 같은 것을 받을 때 배열을 돌려받습니다
여기에는 더 짧은 상태 이름을 사용할 수 있습니다
아무튼 이걸 추가하고 나면 이제 함수도 추가할 수 있습니다
handleChange가 적절한 이름으로 보입니다
그리고 이 input과 연결하는데
onChange 속성을 통해 이뤄집니다
그리고 이건 전혀 새로운 것이 아닙니다
이미 이전 강의들에서 배웠던 내용들입니다
그리고 이 event 객체를 자동으로 받아오겠습니다
이미 배웠듯이
리액트는 그걸 이 handleChange 함수로 전달합니다
이 handleChange 함수가 실행될 때 말입니다
handleChange는 우리가 onChange 속성을 전달하는 함수라고도 했습니다
그러면 리액트가 이 input 필드에 변화가 생길 때마다
저 함수를 실행시킬 것입니다
예를 들어 우리가 입력하는 문자마다 그렇게 하는 것입니다
그 다음엔 enteredPlayerName을 설정할 수 있습니다
이런 식으로 event.target.value로 말입니다
그리고 상태를 다시 input 필드에 넣어줘서
최신 값이 그곳에 반영되게 합니다
물론 value 속성을 통해서 말입니다
그리고 value={enteredPlayerName}으로 설정해주는데
여기 있는 이 상태입니다
그러면 플레이어 이름을 저장하는 컴포넌트가 생겼습니다
이제 handleClick이라는 함수도 추가할 수 있습니다
이 버튼에 연결되어야 하며
이런 식으로 onClick 속성을 통해서 이루어집니다
그리고 이 함수 안에서
이 상태를 가지고 여기서 출력하고 싶은 것입니다
그러므로 우리는 두 번째 상태가 필요합니다
submitted(제출됨) 이나 비슷한 맥락으로 이름을 지어줍니다
그리고 초기에는 false이며, 이 handleClick 안에서
submitted를 true로 설정하고 싶습니다
그래서 이 버튼이 클릭됐을 때, 이 상태를 바꾸고
조건적으로 이 부분을 출력할 수 있는 것입니다
이 'Welcome' (환영합니다) 문구 다음에 중괄호로 감싸서 출력합니다
그리고 이 submitted 상태를
삼항 표현식으로 확인하여 만약 true라면
그걸 enteredPlayerName에 출력합니다
false라면 'unknown entity'(알 수 없는 사용자)를 출력합니다
출력 값은 문자열입니다
그걸로 이제 우리가 이 컴포넌트 내에
필요한 모든 게 있으니
저장한 다음 돌아가서 여기서 'Max'(맥스)를 입력하고
'Set Name'(이름 설정하기)를 클릭하면 여기에 'Welcome Max'(환영합니다 맥스)가 나옵니다
그리고 처음 재로딩하면
매 자판 입력마다 업데이트되지 않고
제가 이 버튼을 눌러 설정할 때만 업데이트합니다
하지만 그 이후에는
매 자판 입력마다 업데이트를 하긴 합니다
enteredPlayerNmae을 여기 출력되는 값으로 받았기 때문입니다
그걸 방지하고 싶다면
setSubmitted를 여기 handleChange에서도 호출해야 합니다
그 다음 false로 설정해서
우리가 그 입력창에 타이핑을 시작하자마자
이 상태가 도로 false로 설정되도록 말입니다
그러면 다시 '알 수 없는 사용자'를 출력하는 것입니다
이제 그걸 가지고 여기 'Max'를 친 다음
이 이름을 설정한 후 계속해서 타이핑하면
제가 다시 이름을 설정할 때까지 '알 수 없는 사용자'로 바뀝니다
물론 이렇게 하면
우리가 다시 타이핑을 할 때마다 '알 수 없는 사용자'로 대뜸 바뀌어 버립니다
그리고 그건 이름을 다시 설정했을 때만 바꿀 수 있습니다
그러니 아직도 이상적인 방법은 아닙니다
이 문제는 상태나 계산된 값들을 추가로 사용하여
이미 설정된 이름을
저장할 수 있습니다
하지만 보시다시피
여기에 쓰이는 코드가 꽤 많습니다
버튼이 눌렸을 때 그저 입력 창에
입력된 값을 읽어들이는 것 뿐인데 말입니다
일단 그 값을 제어하기 위해
enteredPlayerName 상태 값에 속한 그 값을
자판을 입력할 때 마다 onChange 속성을 통해
저장하고 출력할 수 있도록 합니다
그리고 우리에겐 이 두 번째 상태가 있는데
버튼이 눌렸는지 안 눌렸는지 알려줍니다
그리고 이 컴포넌트는 이제
참조를 통해 간소화될 수 있는 아주 좋은 예시입니다