[Tutorial]6.마무리

※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※

  드디어 다음과 같은 tic-tac-toe 게임을 만들었다.

• 플레이 가능한 tic-tac-toe.

• 승자를 판별할 수 있다.

• 턴 내역을 저장할 수 있다.

• 턴 내역을 리뷰하고 이전 턴으로 이동할 수 있다.

잘 했습니다! 이제 React가 어떻게 동작하는지 어지간한 것은 알게 되었을 거라고 믿습니다.

여기서 최종 결과를 확인해 보자.

시간이 좀 남거나 React에 대해 더 공부해 보고자 한다면, 여기 조금 더 난이도 있는 tic-tac-toe 게임을 만들어 보자.

  1) 턴 내역에 (열,행) 포맷으로 표시해보자.

  2) 보드에서 최근 턴을 굵게 표시해보자.

  3) 중첩 반복문을 사용하여 하드코딩된 Square를 수정해보자.

  4) 토글 버튼을 추가하여 턴 내용을 오름차순, 내림차순으로 정렬하자.

  5) 승자가 결정되었을 때, 승리하게 된 Square 3개를 하이라이트 처리하자.

  6) 승자가 없다면 비겼다는 메세지를 보여주자.

이 tutorial을 통해서 React의 컴포넌트, 엘리먼트, props, state를 알아보았다. 이 주제에 대해 더 자세한 설명을 원한다면 나머지 문서들을 참조하라. 컴포넌트에 대해 더 알아보고 싶다면 React.Component API reference를 참조하라.

최종 index.js파일 내용

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function Square (props) { return ( <button className="square" onClick={props.onClick} > {props.value} </button> ); } class Board extends React.Component { renderSquare(i) { return ( <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} /> ); } render() { return ( <div> <div className="board-row"> {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} </div> <div className="board-row"> {this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquare(5)} </div> <div className="board-row"> {this.renderSquare(6)} {this.renderSquare(7)} {this.renderSquare(8)} </div> </div> ); } } class Game extends React.Component { constructor(props){ super(props); this.state = { history : [{ squares : Array(9).fill(null), }], stepNumber : 0, xIsNext: true, }; } jumpTo(step){ this.setState({ stepNumber : step, xIsNext : (step % 2) === 0, }); } handleClick(i){ const history = this.state.history.slice(0,this.state.stepNumber + 1); const current = history[history.length - 1]; const squares = current.squares.slice(); if(calculateWinner(squares) || squares[i]){ return; } squares[i] = this.state.xIsNext?'X':'O'; this.setState({ history : history.concat([{ squares : squares, }]), stepNumber : history.length, xIsNext : !this.state.xIsNext, }); } render() { const history = this.state.history; const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); const moves = history.map((step,move) => { const desc = move? 'Go to move #' + move : 'Go to game start'; return ( <li key={move}> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); }); let status; if(winner){ status = 'Winner: ' + winner; }else{ status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( <div className="game"> <div className="game-board"> <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div> <div className="game-info"> <div>{status}</div> <ol>{moves}</ol> </div> </div> ); } } function calculateWinner(squares){ const lines = [ [0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6], ]; for(let i = 0; i<lines.length; i++){ const [a,b,c] = lines[i]; if(squares[a] && squares[a] === squares[b] && squares[a] === squares[c]){ return squares[a]; } } return null; } // ======================================== ReactDOM.render( <Game />, document.getElementById('root') );