행렬을 활용한 틱택토(Tic Tac Toe) 게임- React 마이그레이션

https://tuesday04.tistory.com/83

행렬을 활용한 틱택토(Tic Tac Toe) 게임 로직 해설 (Javascript)

 

이전 포스팅에서는 HTML + JavaScript로 간단한 틱택토 게임을 구현했습니다.
이번 글에서는 기존 구조를 React로 마이그레이션한 결과를 정리하겠습니다.

 

⚙️ 폴더 구조 설명

React + Vite 환경에서 아래와 같이 구조를 구성하였습니다.

tictactoe-game/
├── index.html (루트 위치로 이동)
├── public/
├── src/
│ ├── App.tsx
│ ├── main.tsx
├── vite.config.js
├── package.json

 

📦 React 마이그레이션 핵심 코드 설명

1. useState로 게임 상태 관리

const [board, setBoard] = useState(Array(9).fill(null));
const [turn, setTurn] = useState('X');

 

• 상태는 각각 독립적으로 관리되며, 컴포넌트 내부에 안전하게 격리됩니다.
• 변경은 setTurn, setBoard를 통해서만 가능하며, 이로 인해 UI가 예측 가능한 흐름으로 작동하게 됩니다.

 

2. JSX와 map()을 활용한 컴포넌트 기반 렌더링

{board.map((val, i) => (
  <button
    key={i}
    onClick={() => handleClick(i)}
    style={{
      width: '100px',
      height: '100px',
      fontSize: '36px',
    }}
  >
    {val}
  </button>
))}

 

 

 

 

• 각 요소는 key={i}로 명확하게 식별되며, React가 diff 알고리즘에서 최소 단위 업데이트를 수행할 수 있게 돕습니다.
• 기존 DOM 기반 코드에서는 createElement와 appendChild를 루프 안에서 수동 호출했지만, 여기서는 데이터 변경만으로 UI가 자동 재구성됩니다.

 

🔗 React 마이그레이션 커밋 보기

https://github.com/veryyounng/game/tree/f5813bd3805c9741cfe26ab515b98c6a3f18fb0a

GitHub - veryyounng/game

 

🍥 완성

 

 

이번에도 O가 이겼습니다 !