리액트로 틱택토 게임 만들면서 기초 배우기 # 8 (플레이어 순서 정하기)

---

 

 

이번 글을 통해 배워갈 내용

1.  리액트에서 간단한 불 값으로 순서를 정해봅니다.

 

 

---

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

GitHub - songk1992/react_tic_tac_toe_lecture: 리액트로 틱택토 게임 만들면서 기초 배우기

 

---

 

참조 및 인용 문서

 

https://reactjs.org/tutorial/tutorial.html

Tutorial: Intro to React – React

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---