[React] tic-tac-toe 게임 만들기 2

📝 리액트의 props와 state, 그리고 컴포넌트의 독립성

이번에는 Edit 버튼을 클릭하면 해당 플레이어의 이름을 수정할 수 있는 기능을 추가하였습니다.
아직 저장 기능은 구현하지 않았지만, 버튼을 클릭하면 입력창이 나타나도록 만들었습니다.
이 과정에서 리액트의 컴포넌트 독립성과 상태(state) 관리 개념을 자연스럽게 이해할 수 있습니다.

---

1️⃣ props와 state의 역할

✅ props란?

• props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.
• 이번 코드에서는 Player 컴포넌트가 App 컴포넌트로부터 name과 symbol을 props로 전달받아 사용하고 있습니다.

✅ state란?

• state는 컴포넌트 내부에서 관리되는 데이터입니다.
• useState를 사용하면 컴포넌트가 자신의 상태를 저장하고 변경할 수 있습니다.
• state가 변경되면 해당 컴포넌트가 자동으로 다시 렌더링됩니다.

const [isEditing, setIsEditing] = useState(false);

→ isEditing의 초기값은 false이며, setIsEditing(true);를 호출하면 true로 변경되면서 컴포넌트가 다시 렌더링됩니다.

---

2️⃣ 리액트에서 컴포넌트는 서로 독립적입니다

💡 리액트는 각 컴포넌트를 독립적인 "인스턴스"로 다룹니다.

• App 컴포넌트에서 <Player name="Player 1" />과 <Player name="Player 2" />를 각각 생성하였습니다.
• Player 컴포넌트는 각각의 isEditing 상태를 개별적으로 관리합니다.
• 따라서 "Player 1"의 Edit 버튼을 눌러도 "Player 2"는 영향을 받지 않습니다.
• 이는 리액트가 각 컴포넌트를 독립적인 단위로 다루기 때문입니다.

<Player name="Player 1" symbol="X" />
<Player name="Player 2" symbol="O" />

→ 각 Player 컴포넌트의 isEditing 상태는 서로 독립적으로 관리되기 때문에, 한 컴포넌트에서 상태가 변경되더라도 다른 컴포넌트에는 영향을 미치지 않습니다.

✅ 즉, 리액트의 상태(state)는 해당 컴포넌트 내부에서만 관리되며, 다른 컴포넌트와 공유되지 않습니다.

---

3️⃣ useState를 활용한 상태 변경

현재 Player 컴포넌트의 상태는 다음과 같이 관리되고 있습니다.

🔹 isEditing 상태에 따라 화면이 달라집니다

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

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

→ isEditing이 true일 때만 <input>이 나타나도록 구현하였습니다.

🔹 Edit 버튼을 클릭하면 상태가 변경됩니다

function handleEditClick() {
  setIsEditing(true);
}

→ setIsEditing(true);가 실행되면 해당 Player 컴포넌트만 다시 렌더링됩니다.

---

4️⃣ 전체 코드 정리

import { useState } from "react";

export default function Player({ name, symbol }) {
  const [isEditing, setIsEditing] = useState(false);

  function handleEditClick() {
    setIsEditing(true);
  }

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

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

  return (
    <li>
      <span className="player">
        {playerName}
        <span className="player-symbol">{symbol}</span>
      </span>
      <button onClick={handleEditClick}>Edit</button>
    </li>
  );
}

import Player from "./components/Player";

function App() {
  return (
    <main>
      <div id="game-container">
        <ol id="players">
          <Player name="Player 1" symbol="X" />
          <Player name="Player 2" symbol="O" />
        </ol>
        GAME BOARD
      </div>
    </main>
  );
}

export default App;

---

🔥 정리

✨ 리액트의 핵심 개념 3가지

1️⃣ 컴포넌트는 독립적입니다 → Player 1과 Player 2는 각각 개별적으로 존재하며, isEditing 상태도 독립적으로 관리됩니다.
2️⃣ state가 변경되면 리렌더링됩니다 → setIsEditing(true);가 실행되면 해당 Player 컴포넌트만 다시 렌더링됩니다.
3️⃣ props는 부모에서 자식으로 전달되지만, state는 컴포넌트 내부에서 관리됩니다