📘 [Recat] React - tic tac toe 게임

2025년 04월 05일 in Dev / Frontend on #React #Web

[Recat] React - tic tac toe 게임

컴포넌트 분리 & 재사용 가능한 컴포넌트 구축

컴포넌트 분리

src/components/Player.jsx 파일을 생성하여, 플레이어 정보를 별도 컴포넌트로 추출합니다.

function Player({ name, symbol }) {
  return (
    <li>
      <span className="player">
        <span className="player-name">{name}</span>
        <span className="player-symbol">{symbol}</span>
        <button>Edit</button>
      </span>
    </li>
  );
}

• name과 symbol을 props로 전달받아 출력합니다.
• 기존 마크업의 구조는 그대로 유지하면서 재사용 가능하게 했습니다.

App.jsx에서 컴포넌트 사용

• 기존에 하드코딩 되어 있던 플레이어 마크업을 삭제하고,
• 대신 Player 컴포넌트를 두 번 호출해 사용합니다. ```jsx

### State(상태) 활용법
Edit(수정) 버튼을 클릭해 플레이어 이름을 수정할 수 있는 상호작용 기능을 구현
`useState` 훅을 사용해 플레이어 이름이 편집 중인지 여부를 관리함.
```jsx
const [isEditing, setIsEditing] = useState(false);

handleEditClick 함수 정의 → 버튼 클릭 시 setIsEditing(true) 호출

function handleEditClick() {
  setIsEditing(true);
}

isEditing 값에 따라 이름을 보여주거나 입력 필드를 출력함.

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

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

이후 JSX 내부에서 playerName을 출력하면 조건에 따라 동적으로 UI가 렌더링됨 현재는 이름만 변경할 수 있는 입력창이 보이며, 저장 기능은 아직 구현하지 않음

컴포넌트 인스턴스의 분리된 동작법

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

• Player 컴포넌트는 하나의 정의된 컴포넌트지만, 앱에서 두 번 사용 중.
• 각 사용 시 리액트는 각각 독립된 컴포넌트 인스턴스를 생성함.
• 이 인스턴스는 자체 상태 (useState)를 갖고 있으며, 다른 인스턴스와 공유하지 않음.
• 각 컴포넌트는 자신만의 상태와 동작을 유지함.

조건적 콘텐츠 & State(상태) 업데이트

버튼 텍스트를 상태에 따라 동적으로 변경

const btnCaption = isEditing ? 'Save' : 'Edit';

버튼의 텍스트를 Edit(수정) 또는 Save(저장)으로 조건부로 표시.

<input type="text" value={name} />

입력 필드에 value 속성을 추가해 현재 플레이어 이름이 자동으로 채워지게 설정

const handleEditClick = () => {
  setIsEditing(!isEditing);
};

버튼을 클릭하면 isEditing 상태를 토글(toggle) 하도록 handleEditClick 함수 개선

상태 업데이트 시 주의할 점: 이전 값에 기반한 변경은 함수형 업데이트를 사용해야 함

setIsEditing(!isEditing);

• 이 방식은 간단하지만, 현재 컴포넌트 실행 주기의 isEditing 값을 기준으로 작동합니다.
• 비동기 업데이트 특성상, 연속 호출 시 예상과 다른 결과를 만들 수 있습니다.

setIsEditing((prevEditing) => !isEditing);

• 이 방식은 React가 최신 상태값을 자동으로 매개변수(prevEditing)로 전달합니다.
• 상태가 여러 번 변경되어도 항상 최신 상태값을 기준으로 변경 가능.
• React 공식 권장 방식.

이유: React의 상태 변경은 스케줄링되고 비동기적으로 처리됨

• setState(예: setIsEditing) 호출 후 상태가 즉시 변경되지 않음.
• 대신 React가 컴포넌트를 다시 렌더링할 때 변경된 상태를 반영함.
• 따라서 같은 실행 주기 내에서 상태를 연속으로 설정하면, 그 값이 이미 최신이 아닐 수 있음

사용자 입력 & 양방향 바인딩

• React에서는 useState를 이용해 입력 필드의 값을 상태로 제어함.
• value를 직접 설정하는 대신, state를 이용한 동적 값으로 관리. ```jsx const [editablePlayerName, setEditablePlayerName] = useState(initialName);

<input type=”text” value={editablePlayerName} onChange={handleChange} />

#### 이벤트 처리 함수: handleChange

- `input` 값이 바뀔 때마다 실행됨 (`onChange` 이벤트)
- `event.target.value`를 통해 사용자가 입력한 값을 읽음
- 이 값을 상태로 저장하여 즉시 반영
```jsx
function handleChange(event) {
  setEditablePlayerName(event.target.value);
}

양방향 바인딩 (Two-way Binding)

• 사용자가 입력한 값을 state로 업데이트하고
• state의 값을 다시 input의 value로 보여줌
• 사용자 입력과 UI가 동기화됨

다차원 리스트 렌더링

const initialGameBoard = [
  [null, null, null],
  [null, null, null],
  [null, null, null],
];
export default function GameBoard() {
  return (
    <ol id="game-board">
      {initialGameBoard.map((row, rowIndex) => (
        <li key={rowIndex}>
          <ol>
            {row.map((playerSymbol, colIndex) => (
              <li key={colIndex}>
                <button>{playerSymbol}</button>
              </li>
            ))}
          </ol>
        </li>
      ))}
    </ol>
  );
}

• GameBoard.jsx 파일을 생성
• <ol> 태그를 사용해 격자 구조를 출력
• 중첩 <ol>을 통해 3행 3열 구성
• .map()을 두 번 사용해 행(row)과 열(col)을 각각 렌더링
• 현재는 버튼 클릭 시 아무 동작 없음

 const [gameBoard, setGameBoard] = useState(initialGameBoard);

  function handleSelectSquare(rowIndex, colIndex) {
    setGameBoard((prevGameBoard) => {
     // 깊은 복사로 불변성 유지
      const updatedBoard = [
        ...prevGameBoard.map((innerArray) => [...innerArray]),
      ];
      // 해당 위치에 플레이어 기호 지정 (임시로 'X')
      updatedBoard[rowIndex][colIndex] = "X";
      return updatedBoard;
    });
  }

• setGameBoard에 함수 전달 → 이전 상태에 기반한 업데이트
• 깊은 복사(deep copy) 사용
• 원본 배열을 직접 수정하지 않음 (불변성 유지)

<button onClick={() => handleSelectSquare(rowIndex, colIndex)}>
  {playerSymbol}
</button>

• 각 버튼은 클릭 시 해당 좌표(rowIndex, colIndex)를 handleSelectSquare로 전달
• 이로써 각 칸의 상태가 동적으로 업데이트됨

App 컴포넌트에 상태 추가 (상태 끌어올리기)

const [activePlayer, setActivePlayer] = useState('X');

• 어떤 플레이어 차례인지 중앙(App)에서 관리
• 이유: GameBoard와 Player 컴포넌트 모두 이 정보를 필요로 함

function handleSelectSquare() {
  setActivePlayer((prevPlayer) => prevPlayer === 'X' ? 'O' : 'X');
}

• 버튼을 누를 때마다 차례가 바뀌도록 구현
• 이전 상태를 기반으로 다음 상태 결정

게임판 상태 제거 및 상태 끌어올리기

const [gameBoard, setGameBoard] = useState(initialGameBoard);//제거

GameBoard.jsx에서 관리하던 상태값을 부모 컴퍼넌트에서 관리하게 변경 상태는 더 이상 이 컴포넌트에서 관리하지 않음

//새로운 상태 추가
const [gameTurns, setGameTurns] = useState([]);

function handleSelectSquare(rowIndex, colIndex) {
  setGameTurns((prevTurns) => {
    let currentPlayer = 'X';

    if (prevTurns.length > 0 && prevTurns[0].player === 'X') {
      currentPlayer = 'O';
    }
	//깊은복사 원본 배열을 직접 수정하지 않음 (불변성 유지)
    const updatedTurns = [
      { square: { row: rowIndex, col: colIndex }, player: currentPlayer },
      ...prevTurns,
    ];

    return updatedTurns;
  });
}

• 이 배열은 “누가 언제 어디를 클릭했는지” 정보를 담음
• 배열의 첫 요소가 가장 최근 턴이 되도록 앞쪽에 추가
• prevTurns[0]: 가장 최근 턴
• 가장 최근에 X가 눌렸다면 → 현재는 O의 차례
• 상태를 직접 변경하지 않고, 복사 후 새 배열을 만들어 불변성 유지
• player, row, col 정보를 객체로 묶어 기록

 Props(속성)에서 State(상태) 파생하기

상태는 App에서만 관리 GameBoard.jsx에서는 상태값을 관리 하지 않음 부모 컴포넌트로부터 받아온 props 받아서 값만 세팅해준다.

let gameBoard = initialGameBoard;

  for (const turn of turns) {
    const { square, player } = turn;
    const { row, col } = square;
    gameBoard[row][col] = player;
  }

조건적 버튼 비활성화

GameBoard.jsx에서 playerSymbol 확인

<button
  onClick={() => onSelectSquare(rowIndex, colIndex)}
  disabled={playerSymbol !== null}
>
  {playerSymbol}
</button>

• playerSymbol은 현재 칸에 표시된 기호 (null, 'X', 'O')
• playerSymbol !== null
  • 이미 클릭된 칸이라면 → disabled=true → 클릭 불가능
• playerSymbol === null
  • 아직 클릭되지 않은 칸 → disabled=false → 클릭 가능

승자 정하기

export const WINNING_COMBINATIONS = [
  [
    { row: 0, column: 0 },
    { row: 0, column: 1 },
    { row: 0, column: 2 },
  ],
  [
    { row: 1, column: 0 },
    { row: 1, column: 1 },
    { row: 1, column: 2 },
  ],
  [
    { row: 2, column: 0 },
    { row: 2, column: 1 },
    { row: 2, column: 2 },
  ],
  [
    { row: 0, column: 0 },
    { row: 1, column: 0 },
    { row: 2, column: 0 },
  ],
  [
    { row: 0, column: 1 },
    { row: 1, column: 1 },
    { row: 2, column: 1 },
  ],
  [
    { row: 0, column: 2 },
    { row: 1, column: 2 },
    { row: 2, column: 2 },
  ],
  [
    { row: 0, column: 0 },
    { row: 1, column: 1 },
    { row: 2, column: 2 },
  ],
  [
    { row: 0, column: 2 },
    { row: 1, column: 1 },
    { row: 2, column: 0 },
  ],
];

우승 조합 배열 공식 winning-combination.js 생성 틱택토 게임을 이기기 위해서는 한 줄을 완성해야 함 위 코드는 게임을 이기기 위한 조건 정보를 담은 배열

반복문을 통해 위 배열을 순회하여 승리조건에 만족하는지 검사한다.

let winner;

for (const combination of winningCombinations) {
  const firstSquare = gameBoard[combination[0].row][combination[0].col];
  const secondSquare = gameBoard[combination[1].row][combination[1].col];
  const thirdSquare = gameBoard[combination[2].row][combination[2].col];

  if (
    firstSquare &&
    firstSquare === secondSquare &&
    firstSquare === thirdSquare
  ) {
    winner = firstSquare; // 'X' or 'O'
    break;
  }
}

• 우승 조합 루프 순회
• 각 조합에서 3칸의 기호 추출
• 모두 동일한 기호('X', 'O')이고 null이 아니면 → 승리
• 해당 기호를 winner 변수에 저장

게임 오버 & 무승부 여부 확인

GameOver.jsx 컴포넌트 생성

export default function GameOver({ winner }) {
  return (
    <div id="game-over">
      <h2>Game Over!</h2>
      <p>{winner ? `${winner} won!` : "It's a draw!"}</p>
      <p>
        <button>Rematch!</button>
      </p>
    </div>
  );
}

• winner를 props로 받아서 메시지를 조건부로 출력
• winner가 없으면 무승부 처리

app컴포넌트에 무승무 판단 로직 추가

const hasDraw = gameTurns.length === 9 && !winner;

게임 턴이 9번 진행됐고 승자가 없으면 → 무승부

{(winner || hasDraw) && <GameOver winner={winner} />}

승자 있거나 무승부인 경우에만 GameOver 출력

ReMatch 버튼 클릭 처리

gameTurns 상태를 초기화하여 게임을 재시작

function handleRestart() {
  setGameTurns([]);
}

GameOver 컴포넌트에서 버튼과 이벤트 전달

export default function GameOver({ winner, onRestart }) {
  return (
    <div id="game-over">
      <h2>Game Over!</h2>
      <p>{winner ? `${winner} won!` : "It's a draw!"}</p>
      <p>
        <button onClick={onRestart}>Rematch!</button>
      </p>
    </div>
  );
}

버그 발생 - Rematch 버튼 눌러도 게임판 초기화되지 않음

• 문제: initialGameBoard는 참조 타입 (배열)
• 수정 전: gameBoard는 항상 같은 메모리 주소를 참조
• 그래서 게임 종료 후 Rematch를 눌러도 게임판이 초기화되지 않음

 let gameBoard = initialGameBoard; //수정전
 let gameBoard = [...initialGameBoard.map((array) => [...array])];//수정후
 

• 깊은 복사로 문제 해결

최종코드 참고

생각보다 분량이 많아서 중간중간 빠진 부분이 있습니다. 최종코드는 아래 주소에서 확인바랍니다. react-guide-2025/04 Essentials Deep Dive/07-tic-tac-toe-starting-project at main · sosiluv/react-guide-2025 · GitHub

📑 Reference

---

• 【한글자막】 React 완벽 가이드 2025 with React Router & Redux | Udemy
• 이미지 출저 Freepik | 올인원 AI 크리에이티브 툴

---