Square 컴포넌트를 함수 컴포넌트로 바꾸면 코드가 더 간결해짐. 부모 컴포넌트의 어트리뷰트는 props 객체로 받아서 사용하자.

function Square(props){
  return(
    <button className="square" onClick={props.onclick}>
      {props.value}
    </button>
  );
}

O, X를 표시하도록 하자 (boolean 값 이용)

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext:true,                 ........(1)
    };
  }
   handleClick(i){
    const squares=this.state.squares.slice();
    if (squares[i]){return;}         .......(*)
    squares[i]=this.state.xIsNext ? 'X':'O';
    this.setState({
      squares:squares,
      xIsNext: !this.state.xIsNext,  ........(2)
    });
  }
  ...
  (중략)
  ...
   render() {                      ........(3)
    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); 

(1) xIsNext를 state에 추가하여 첫번째 user의 턴(O)인지 두번째 user의 턴(X)인지 확인
(2) 현재 턴인 user가 선택한 영역을 화면에 표시함.
(3) 다음 턴의 user을 화면에 표시.
(*) 누군가 클릭했다면 return (클릭되지 않음.)

가로 세로 대각선 한 줄을 한 user가 다 선택하면 이김

• 승자 결정 함수

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;
}

• 승자 결정 함수의 사용

//Board의 render함수
  render() {
    const winner = calculateWinner(this.state.squares);
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

동작에 대한 기록 저장하기-(발전)->뒤로 되돌아가기

이전 동작에 대한 리스트를 보여주려면 최상위 단계의 Game 컴포넌트가 필요합니다. history를 이용해야하기 때문에 최상위 단계 Game 컴포넌트에 history state를 두겠습니다.

history state를 Game 컴포넌트에 두었기 때문에 자식 Board 컴포넌트에서 squares state를 더 이상 사용하지 않아도 됩니다.

slice()를 사용해서 매 동작 이후에 squares 배열의 새로운 복사본을 만들었기에, 과거의 squares 배열의 모든 버전을 저장하고 이미 지나간 차례를 탐색할 수 있습니다.

과거의 squares 배열들을 history라는 다른 배열에 저장할 것입니다. history 배열은 첫 동작부터 마지막 동작까지 모든 게임판의 상태를 표현한다.

Game에 history저장.

(1) Board에 있던 state를 Game으로 가져옴
(1.1) Game자신에 저장되어 있는 history
(1.2) 바로 직전의 history
(1.3) 현재 user가 선택하면 바뀐 결과 squares를 Game 자신의 history에 concat.

Board는 부모 컴포넌트 Game에게 props을 통해 현재 squares를 전달받는다.

Board는 Game에게서 전달 받은 props객체의 squares[i](squares의 해당 칸의 값)를 자식 컴포넌트 Square에게 전달한다.

이로써 칸 하나가 화면에 표시된다.

특정 과거로의 이동

위와 같이 쓰면,,,, 에러가 난다.

경고 배열이나 이터레이터의 자식들은 고유의 “key” prop을 가지고 있어야 합니다.

리스트 아이템에 key prop을 지정하여 각 아이템이 다른 아이템들과 다르다는 것을 알려주어야 합니다.
아래와 같은 방법으로..!

<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>

그래서 아래와 같이 key를 추가해 줘야 한다.

1. Game 컴포넌트의 state에 stepNumber를 추가.

현재 진행 중인 단계 표시.

2. Game 컴포넌트에 jumpTo함수 추가.

xIsNext는 x,o,x,o...순서이므로

3. 과거로 간 후 새로운 이동을 한다면 미래의 기록을 없앤다.

4. render

바로 직전의 값에서 history.length-1 this.state.stepNumber 로 바꿈.

최종결과