반응형
이번 글을 통해 배워갈 내용
- 리액트에서 간단한 불 값으로 순서를 정해봅니다.
Board Class에서 현재는 "X" 를 입력하는 기능이 있지만 "O" 를 입력하는 기능이 없습니다.
간단한 Bool로 상태를 변경해서 플레이어 순서를 정해보겠습니다.
먼저 생성자에 xIsNext라는 값을 초기화 해서 "X" 가 첫 플레이를 하도록 설정합니다.
constructor(props) {
super(props);
this.state = {
squares: Array(9).fill(null),
xIsNext: true,
};
}
그 다음
handleClick 함수가 실행될때
XIsNext 값을 변경해서 다음 플레이어가 턴을 넘겨 받을수 있도록 변경합니다.
handleClick(i) {
const squares = this.state.squares.slice();
squares[i] = this.state.xIsNext ? "X" : "O";
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
});
}
그 뒤
렌더메소드 내에서 XIsNext 값에 따라
플레이어가 누군지 표시를 해줍니다.
const status = "Next player: " + (this.state.xIsNext ? "X" : "O");
이에 따라 각 플레이어의 플레이에 따라서 턴이 바뀌고 그에 맞게 X 혹은 O 값을 입력 할 수 있게 바뀐 것을 알수 있습니다.
읽어주셔서
감사합니다.
다음 강의에서는
승자를 정하는 방법을 구해보겠습니다.
코드보기
https://github.com/songk1992/react_tic_tac_toe_lecture
참조 및 인용 문서
https://reactjs.org/tutorial/tutorial.html
https://codemasterkimc.tistory.com/50
반응형
'Javascript > React' 카테고리의 다른 글
VS코드 리액트 개발의 필수 아이템 Simple React Snippets (0) | 2021.08.20 |
---|---|
리액트로 틱택토 게임 만들면서 기초 배우기 # 9 (승자 정하기) (0) | 2021.08.07 |
리액트로 틱택토 게임 만들면서 기초 배우기 # 7 (function components) (0) | 2021.08.07 |
리액트로 틱택토 게임 만들면서 기초 배우기 # 6 (controlled components) (0) | 2021.08.07 |
리액트로 틱택토 게임 만들면서 기초 배우기 # 5 (상호작용하는 Component 만들기) (0) | 2021.08.07 |