Tutorial 자습서 - 5
페이지 정보
본문
Reactjs.org 자습서 Tutorial 활용 - 순서대로
https://ko.reactjs.org/tutorial/tutorial.html
- 틱택토 Tic Tac Toe 게임 만들기로 자습하기 -
-----------------------
자습서 - 5
-----------------------
4회차에서 ... X는 채울 수 있었다. ㅋ
이번에는 클릭할때마다 X와 O가 번갈아 채워질 수 있도록 하자.
그래야 껨이 되니깐. ✌
Lift State
state를 각 square가 아닌 부모 Board 컴포넌트에 저장.
요로케 바꾸면 된다.
import React from 'react';
import ReactDOM from 'react-dom';
import './square.css'
function Square(props) { // 클래스에서 함수로 변경
return (
<button className='square' onClick={props.onClick}>
{props.value}
</button>
)
}
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: Array(9).fill(null),
xIsNext:true, // X, O 선택
};
}
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = this.state.xIsNext ? 'X' : 'O'; // this.state.xIsNext 가 true 면 X
this.setState({ // state 변경
squares: squares,
xIsNext: !this.state.xIsNext, // this.state.xIsNext 의 값을 역으로
});
}
renderSquare(i) {
return (
<Square
value={this.state.squares[i]}
onClick={() => this.handleClick(i)}
/>
);
}
render() {
const status = 'Next player:' + (this.state.xIsNext ? 'X' : 'O'); //
return (
<div>
<div className="status">{status}</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 {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
export default Square;
서버 실행 결과 화면
