이번 시간에는 버튼이 작동하도록 해 보겠습니다
버튼이 작동한다 함은 결국
버튼을 눌렀을 때
입력 필드를 띄워서 이용자가
이름을 수정할 수 있게 된다는 뜻입니다
그래서 지금 이 이름을 출력하는 대신
입력 필드를 넣을 예정인데, 이 부분은
웹사이트 사용자가 확인을 누르면 사라질 것입니다
즉, 다시 말해
수정(edit) 버튼도 수정 중에는 바뀌어야 하므로
입력 필드를 보여줄 때는
수정이 아닌 저장(save)이라고 보여줘야 합니다
그래서 이 상태를 조금 수정해 보겠습니다
여기에서는 데이터를 조정해서
UI가 수정 후 업데이트되도록 하겠습니다
이 작업을 위해 이미 배우셨듯
useState를 리액트 라이브러리에서 가져와서
상태값을 생성함으로써 해당 값을 수정할 수 있는
함수를 가져올 것이고
또 이 함수를 통해 리액트가 UI를 수정할 것입니다
그래서 여기에 useState를 호출하고
이미 배우셨듯 초기값을 설정하면
두 요소가 있는 배열을 얻게 됩니다
여기에 배열 구조 분해 할당을 사용해서
이 두 요소를 각각의 상수에 저장하겠습니다
첫 번째 상수의 이름은 isEditing
두 번째 상수의 이름은 setIsEditing으로 하겠습니다
이렇게 하면 현재 플레이어 이름을
수정하는 중이든지 아니든지 그 정보를
저장할 수 있습니다
즉 상태의 불리언(Boolean) 값인
true나 false 값을 제어하게 됩니다
초기값으로 false를 설정하겠습니다
즉 시작할 때에는 수정 상태가 아니므로
입력 필드를 띄우지 않겠다는 뜻입니다
여기에서 문제를 하나 내겠습니다
이 상태를 가지고 조금 더 작업해 볼텐 데
여러분이 직접 여기 있는 이 버튼이
setIsEditing을 true로 변경하도록 함수를 적용해봅시다
이 때 이 플레이어 이름 span는
isEditing이 false일 때만 보여야 합니다
이 경우 입력 필드만 띄워야 하는데
아직 입력 기능이 작동할 필요는 없습니다
isEditing이 true일 때 입력 필드가 보이기만 하면 됩니다
이것이 여러분께 드리는 문제입니다
여기에서 영상을 잠깐 멈추시고
직접 이 부분을 작성해 보시기 바랍니다
잠시 후 같이 해 보겠습니다
제대로 작성하셨나요?
한 번 같이 해 보겠습니다
먼저 함수를 하나 더하겠습니다
이 컴포넌트 함수 내에 작성하겠습니다
왜냐하면 이 함수는
이 setIsEditing 상태를 통해
리액트의 업데이트 함수를 불러오므로
이 함수가 이 함수 안에 있어야만
setIsEditing을 사용할 수 있기 때문입니다
이 함수의 이름은 handleEditClick으로 하겠습니다
물론 이름은 임의로 정하시면 됩니다만
저는 이전에 언급한 암묵적 규칙대로 이름을 짓고 있습니다
즉 handle을 이름에 포함시킴으로써
이 함수가 식별자의 역할을 해서
특정 상황에 작동할 것임을 의미하고, EditClick은
이 버튼의 내용을 알려줍니다
이제 이 함수를 이 버튼에 지정하기 위해
onClick이라는 속성(prop)을 더하겠습니다
이것 또한 버튼 컴포넌트에 이미 작성되어 있는 속성입니다
그리고 이 onClick 속성의 값은
이 handleEditClick 함수입니다
이미 배우셨듯이
이 함수는 여기서 실행되지 않습니다
그래서 이렇게 괄호를 넣으시면 안 됩니다
여기에는 함수 이름만 작성해야
이 함수를 onClick이라는 속성의 값으로
이 버튼에 위치한 채로 전달할 수 있습니다
이렇게 해야만 나중에
리액트가 이것을 실행할 수 있습니다
이 handleEditClick 안에서
이 상태 업데이트 함수를 사용해 보겠습니다
useState가 제공하고 있는 함수인데
여기에 setIsEditing을 호출하고
새 상태 값을 setIsEditing의 값으로 전달하겠습니다
즉 이 부분은 true가 됩니다
처음에는 false였다가
이제는 true로 설정하는 이유는
이제 버튼을 클릭한 시점이기 때문입니다
이제 이 상태를 업데이트하겠습니다
이 상태 업데이트 함수를 불러오면
이미 언급했듯 리액트도
이 플레이어 컴포넌트 함수를 재실행하게 됩니다
이 때 리액트는 동시에
이 JSX 코드를 재검토하여 수정된 내용이 있는지 확인합니다
수정된 내용이 있다면 그 변경사항이
DOM과 다른 컴포넌트 함수에 반영됩니다
예를 들면 이 앱 컴포넌트 함수는
변경되지 않을 것입니다
이 플레이어 컴포넌트 같은 자식 컴포넌트가 변경될 경우
부모 컴포넌트인 앱 컴포넌트는
플레이어 컴포넌트에 영향을 받지 않습니다
그래서 이 컴포넌트 함수가 재실행되어도
현재로서는 UI에 변하는 내용이 없습니다
지금은 이 isEditing 상태로
JSX 코드를 내보내지 않기 때문입니다
지금 이 부분을 수정해 보겠습니다
이 이름 부분은 이미 언급했듯
isEditing이 false일 때만 보여야 합니다
true일 경우에는 그 대신 입력 필드가 보여야 합니다
그래서 이 부분을 내보낼 때는
조건적인 입력으로서 내보내는 것입니다
여러분은 이미
여러 방식으로 이 부분을 접근할 수 있습니다
예를 들면 수식을 사용할 수 있습니다
여기에 변수를 하나 더해서
이름을 playerName으로 하겠습니다
첫 번째 선택지는 이 span입니다
이 부분을 잘라서 playerName에 붙여넣겠습니다
이미 배우셨듯이
JSX 코드를 변수값으로 저장할 수 있습니다
하지만 isEditing이 true일 경우에 이 값이 변하기 때문에
자바스크립트에서는
이것이 true인지 확인해볼 수 있습니다
물론 이 방식은 조금 장황합니다
자바스크립트에는 이것을 위한 지름길이 있는데
if문에 isEditing을 넣는 것입니다
이렇게 하면 이 부분이 true인지 자동으로 확인을 합니다
true일 경우에 playerName은
다른 값을 저장해야 합니다
즉 이 경우에는 입력 요소를
playerName의 값으로 받는 것입니다
이 입력값의 타입은 텍스트입니다
텍스트로 입력을 받기 때문에
필수 조건이라는 의미로 required를 쓰겠습니다
그리고 다른 속성은 나중에 추가하겠습니다
지금으로서는 이 정도면 완성입니다
그리고 물론 playerName 변수는
이 아래에서 출력을 하게 되고
출력 시에는 이 span를 내보내거나
isEditing이 true면 이 입력값을 내보냅니다
이제 이 컴포넌트, 즉
이 플레이어 컴포넌트는 상호작용이 가능해졌고
이 버튼을 클릭할 수 있게 되었습니다
저장 후에 확인해 보면, 이 버튼을 클릭하니
이름 부분은 사라지고 입력 창이 생깁니다
물론 지금으로서는 수정한 이름을 저장하지는 못합니다
그리고 여기를 이미 지정되어 있는 플레이어 이름으로
미리 채워 넣는 것이 좋겠습니다
이것들은 모두 나중에 추가할 내용들이고
오늘 함께 작업해 본 첫 단계는
상호작용 가능한 요소를 더하는 것이었습니다