저번 시간까지 우리는 클릭 시 입력 필드 창이 뜨도록
수정(Edit) 버튼 작업을 했습니다
다음 목표는 이 입력 필드에 값을 미리 채우되
현재 플레이어 이름으로 채우는 것이고
다음으로는 수정 버튼을 한 번 더 클릭하면
입력 필드를 없애고 플레이어 이름을 다시 띄우는 것입니다
그리고 이 버튼은 만약 수정 중인 상태라면
수정이 아니라 저장(Save) 버튼이어야 합니다
이 코드에 수정해야 할 사항이 꽤 많습니다
먼저 버튼의 설명(caption)부터 작업하겠습니다
버튼에 수정 혹은 저장이라고 뜨는 것은
수정 중인 상태인지의 여부에 달렸기 때문에
직접 작성한 하드코드(고정된 값의 코드)를 삭제하고
동적인 값을 넣겠습니다
이 작업에는 중괄호를 사용하게 됩니다
여기서 하고자 하는 작업은
조건부 내용을 출력하는 것인데
수정 혹은 저장이라는 단어가 각각
isEditing 상태에 따라 사용되록 하는 것입니다
먼저 여기에 변수를 하나 생성하겠습니다
이름은 btnCaption, 기본값은 '수정(Edit)'이고
수정 중 상태라면 '저장(Save)'입니다
여기에서는 btnCaption을 사용해도 되고
삼항 연산자을 사용해도 됩니다
먼저 isEditing이 true인지 확인하고
만약 true면 '저장'을 보여줍니다
수정 중인 상태에는 버튼이 '저장'으로 보여야 하기 때문입니다
만약 false면, 즉 수정 중이 아니면, '수정'을 보여줍니다
이 두 방식 모두 사용이 가능합니다
모든 방식을 보여드리기 위해
오늘은 삼항 연산자를 사용하겠습니다
이대로 저장 후 확인해 보면 버튼에 '저장(Save)'이라고 표시됩니다
그리고 다른 경우, 수정 중이 아니면 '수정(Edit)'이라고 뜹니다
다음 단계는 이 입력 필드에 값을 미리 채우되
현재 플레이어 이름으로 채우는 것입니다
먼저 생성하는 입력 부분에
값 속성을 더하겠습니다
값 속성의 역할은
입력 필드 속의 값을 설정하는 것입니다
그러므로 여기에서는
값 속성을 동적 속성으로 설정하겠습니다
이 부분에서 보여주는 이름의 내용이
각 플레이어 컴포넌트마다 다르기 때문입니다
이 속성은 다양한 속성 중 하나입니다
그래서 name(이름) 속성을 통해
입력 부분의 값으로 나타내겠습니다
이대로 저장 후 수정 버튼을 눌러보면
이 부분에 이미 설정된 플레이어 이름이 있고
텍스트 형식이 이미 설정되어 있는데
이것은 제가 제공해드린 CSS 파일 때문입니다
이제 마지막 단계만 남았습니다
이 단계 다음에
이름을 변경하고 난 뒤
수정사항이 반영되는지 보겠습니다
지금은 보시는대로
수정 자체를 할 수 없습니다
일단 그 작업을 하기 전에
먼저 확인할 것은 이 버튼을 누르면
즉 저장을 누르면 이 부분이 닫히고
이전처럼 입력창 없이
이름만을 보여줘야 합니다
이 작업을 위해서는
이 handleEditClick 함수가
더 유연해져야 합니다
지금은 보시다시피
isEditing 상태는 언제나 true입니다
엄밀히 말하면 언제나 true는 아니므로
isEditing 상태를 현재와는 반대로
새로 설정해 보겠습니다
만약 isEditing이 true면
false인 상태를 설정하고, 반대의 경우도 마찬가지입니다
이 작업을 하기 위해서는
결과값을 setIsEditing으로 보내야 합니다
삼항 연산자로 isEditing을 확인할 때
만약 결과가 true라면
false라는 값을 setIsEditing으로 보내겠습니다
반대의 경우에는 true을 보내겠습니다
이 방식으로
값을 반전시켜서
setIsEditing으로 보낼 수 있습니다
저장 후 확인해 보면 반영된 것을 볼 수 있습니다
이 입력 모드를 열고 닫는 것이 가능해졌습니다
하지만 이 방식에는 몇 가지 문제점이 있습니다
첫 번째는 너무 장황하다는 것입니다
자바스크립트에서는 불리언 값의
반대값을 지정하고 싶을 때
더 간결한 방법이 있습니다
바로 해당 값 앞에 느낌표를 하나 추가하는 것입니다
이것으로 해당 값이 반전됩니다
즉 true는 false가, false는 true가 됩니다
이것으로 현재 가지고 있는 값의
반대가 되는 것입니다
이 방식이 이전 것보다 더 나은 방식이지만
아직 완벽한 해결방안은 아닙니다