[React] 양방향 바인딩

 

📝 리액트에서 양방향 바인딩 이해하기

리액트에서 양방향 바인딩은 **UI와 상태(state)**를 실시간으로 동기화하는 중요한 개념입니다. 이를 통해 사용자가 UI에서 입력을 하면, 그 값이 상태에 반영되고, 상태가 변경되면 UI도 자동으로 업데이트됩니다. 이번에 작성한 코드에서는 양방향 바인딩을 적용하여 플레이어 이름을 수정하는 기능을 구현했습니다. 이전 코드와 달라진 점을 중심으로 양방향 바인딩의 개념을 정리해 보겠습니다.

---

1️⃣ 상태 관리: useState로 초기화하기

const [playerName, setPlayerName] = useState(initialName);

리액트에서는 상태를 관리할 때 useState 훅을 사용합니다. 이전에는 name prop을 직접 사용했지만, 이번에는 playerName 상태를 **initialName**을 기반으로 초기화했습니다. 이렇게 함으로써 playerName 값은 input 필드에서 수정될 수 있도록 설정됩니다.

• playerName: 플레이어의 이름을 저장하는 상태 변수입니다.
• setPlayerName: 이 상태를 변경할 수 있는 함수입니다.

상태 변경의 핵심: 상태가 변경되면 UI가 자동으로 업데이트되므로, 사용자 인터페이스가 항상 최신 상태를 반영하게 됩니다. 🖥️

---

2️⃣ handleChange 함수로 입력값 처리하기

function handleChange(event) {
  setPlayerName(event.target.value);
}

양방향 바인딩을 위해 onChange 이벤트를 활용합니다. 사용자가 input 필드에 입력할 때마다 setPlayerName 함수가 호출되어 상태가 업데이트됩니다. 이때 event.target.value는 입력된 값을 가져옵니다.

• handleChange: 사용자가 입력하는 값을 실시간으로 playerName 상태에 반영합니다.

이렇게 입력된 값은 UI와 상태가 동기화되어 항상 일치하게 됩니다. ✍️

---

3️⃣ editablePlayerName 변수로 UI 렌더링 제어하기

let editablePlayerName = <span className="player-name">{playerName}</span>;

if (isEditing) {
  editablePlayerName = (
    <input type="text" required value={playerName} onChange={handleChange} />
  );
}

이 부분에서는 editablePlayerName 변수에 span 또는 input을 할당하여 편집 모드와 일반 모드를 동적으로 전환합니다.

• 기본적으로는 span으로 이름을 보여주고, 편집 모드에서는 input 필드를 표시해 사용자가 이름을 수정할 수 있게 합니다.
• value={playerName}로 input 필드의 값이 상태와 연결되고, **onChange**를 통해 사용자의 입력을 반영합니다.

이렇게 UI의 값과 상태가 항상 일치하도록 합니다. 🔄

---

4️⃣ handleEditClick 함수로 편집 모드 토글하기

function handleEditClick() {
  setIsEditing((editing) => !editing);
}

이 함수는 편집 모드를 토글하는 역할을 합니다. 편집 모드일 때는 이름을 수정할 수 있고, 편집을 완료하면 다시 일반 모드로 돌아갑니다.

• setIsEditing((editing) => !editing)을 사용하여 isEditing 값을 반전시킵니다. isEditing이 true면 편집 모드, false면 일반 모드로 변경됩니다.

핵심: 버튼을 클릭하여 편집 모드를 전환하며, 이에 따라 UI가 동적으로 변화합니다. 💡

---

5️⃣ Edit/Save 버튼으로 UI 업데이트

<button onClick={handleEditClick}>{isEditing ? "Save" : "Edit"}</button>

이 버튼은 isEditing 상태에 따라 버튼의 텍스트를 "Save" 또는 **"Edit"**으로 동적으로 변경합니다.

• 편집 모드에서는 "Save" 버튼을 눌러 이름을 저장하고, 일반 모드에서는 "Edit" 버튼을 눌러 이름을 수정할 수 있습니다.

이 버튼은 양방향 바인딩을 완성하는 중요한 요소로, 상태 변화에 따라 버튼의 동작도 달라집니다. 🖱️

---

6️⃣ 기존 코드와의 차이점

1. useState로 상태 초기화

이전에는 name prop을 직접 사용했으나, 이제는 playerName 상태를 사용하여 동적으로 값을 변경할 수 있게 되었습니다.

2. handleChange로 input 값 처리

이전에는 input의 값을 수정하는 방식이 없었으나, 이제는 onChange를 사용하여 실시간으로 상태를 업데이트합니다.

3. 편집 모드 전환을 위한 버튼 구현

isEditing 상태를 사용하여 편집 모드와 일반 모드를 전환하고, 이에 따라 UI가 변화하도록 만들었습니다.

4. 양방향 바인딩 적용

input 필드와 상태를 양방향으로 연결하여 사용자가 입력한 값이 상태에 반영되고, 상태 값이 변경되면 UI가 즉시 업데이트됩니다.

---

7️⃣ 양방향 바인딩의 핵심 이해하기 🔑

양방향 바인딩은 리액트에서 매우 중요한 개념입니다. UI와 상태를 실시간으로 동기화하는 방식은 사용자에게 직관적인 경험을 제공하며, 코드의 유지보수성을 높여줍니다. 이를 통해 컴포넌트 내부의 상태를 안전하고 효율적으로 관리할 수 있습니다.

---

결론

리액트에서 양방향 바인딩은 상태와 UI를 실시간으로 연결하는 중요한 기법입니다. 이번 코드를 통해 useState와 onChange, value 속성을 활용하여 플레이어 이름을 수정하는 기능을 구현하면서 양방향 바인딩의 동작 방식을 잘 이해할 수 있었습니다. 상태를 업데이트하고 UI가 자동으로 변경되는 리액트의 특징을 활용하여, 사용자 인터페이스를 동적이고 직관적으로 만들 수 있었습니다. 🌟