코딩

📝 버튼 상태 변화 & 입력 필드 유지이전 코드에서 개선된 점은 버튼의 동적 변경과 Edit → Save → Edit 전환 방식입니다.이번 코드에서는 Edit 버튼을 클릭하면 "Save" 버튼으로 변경되며, 다시 클릭하면 원래 상태로 돌아갑니다.1️⃣ Edit 버튼을 Save 버튼으로 바꾸기이전에는 버튼이 항상 "Edit"로 표시되었지만, 이제 버튼의 내용이 동적으로 변경됩니다.{isEditing ? "Save" : "Edit"}→ isEditing이 true이면 "Save" 버튼이 되고, false이면 "Edit" 버튼이 됩니다.또한, 아래와 같이 변수를 따로 선언하여 관리하는 방법도 가능합니다.let btnCaption = "Edit";if (isEditing) { btnCaption = "Sav..

📝 리액트의 props와 state, 그리고 컴포넌트의 독립성이번에는 Edit 버튼을 클릭하면 해당 플레이어의 이름을 수정할 수 있는 기능을 추가하였습니다.아직 저장 기능은 구현하지 않았지만, 버튼을 클릭하면 입력창이 나타나도록 만들었습니다.이 과정에서 리액트의 컴포넌트 독립성과 상태(state) 관리 개념을 자연스럽게 이해할 수 있습니다.1️⃣ props와 state의 역할✅ props란?props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.이번 코드에서는 Player 컴포넌트가 App 컴포넌트로부터 name과 symbol을 props로 전달받아 사용하고 있습니다.✅ state란?state는 컴포넌트 내부에서 관리되는 데이터입니다.useState를 사용하면 컴포넌트가 자신의 상태..