[번역] Tutorial: Completing the Game 1

Completing the Game

게임 완성하기

 

We now have the basic building blocks for our tic-tac-toe game. To have a complete game, we now need to alternate placing “X”s and “O”s on the board, and we need a way to determine a winner.

우리는 이제 틱택토 게임의 토대를 쌓았다. 게임을 완성하기 위해서, 우리는 X와 O를 번갈아가며 보드에 놓는 것이 필요하고, 승자를 결정하는 방법이 필요하다.

Lifting State Up

state를 들어 올리다

 

Currently, each Square component maintains the game’s state. To check for a winner, we’ll maintain the value of each of the 9 squares in one location.

현재, 각각의 square 컴포넌트들은 게임의 state를 유지합니다. 우승자를 확인하기 위해서, 우리는 한 지역에서 아홉개의 square들의 value를 유지합니다.

 

We may think that Board should just ask each Square for the Square’s state. Although this approach is possible in React, we discourage it because the code becomes difficult to understand, susceptible to bugs, and hard to refactor. Instead, the best approach is to store the game’s state in the parent Board component instead of in each Square. The Board component can tell each Square what to display by passing a prop, just like we did when we passed a number to each Square.

우리는 아마 Board가 square의 state를 각각 물어봐야 한다고 생각할 지도 모른다. 비록 이 접근이 리액트에서 가능하지만, 우리는 그것을 지양한다. 왜냐하면 코드가 이해하기어려워지고 bug를 허용하기 쉽고, 리팩토링하기 힘들기 때문이다.

대신에, 최상의 접근법은 각각의 square대신 부모 board 컴포넌트의 게임 state값을 저장하는 것이다. Board 컴포넌트는 각각의 Square(prop을 넘겨받아서 보여주는)들에게 우리가 각각의 square들에게 숫자를 넘겨주었던 것처럼 말할 수 있다.

 

To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component.

여러 자식들에게서 데이터를 수집하거나, 두 자식들 서로가 상호작용하려면, 그들의 부모 컴포넌트에서 공유된 state를 명시해야 할 필요가 있다. 부모 컴포넌트는 state를 자식들에게 props를 사용하여 내려 보낼 수도 있다. 이것은 자식 컴포넌트들 및 부모와의 동기화를 유지한다.

 

Lifting state into a parent component is common when React components are refactored — let’s take this opportunity to try it out.

부모 컴포넌트로 state를 들어 올리는 것은 흔하다. 리액트 컴포넌트를 재구성할 때. ㅡ 이번 기회에 함 시도해 봐.

 

Add a constructor to the Board and set the Board’s initial state to contain an array of 9 nulls corresponding to the 9 squares:

Board의 생성자 함수를 추가하고 Board의 초기 state값은 배열을 넣으세요. 9개의 squares에 상응하는 null 값을.

When we fill the board in later, the this.state.squares array will look something like this:

나중에 보드에 채울 때, this.state.squares 배열은 아래와 같은 모습일 것이다.

The Board’s renderSquare method currently looks like this:

boards의 renderSquare 메소드는 현재 아래와 같다.

 

renderSquare(i) { return <Square value={i} />; }

 

In the beginning, we passed the value prop down from the Board to show numbers from 0 to 8 in every Square. In a different previous step, we replaced the numbers with an “X” mark determined by Square’s own state. This is why Square currently ignores the value prop passed to it by the Board.

처음에 우리는 value prop을 Board로부터 모든 square의 0~8 숫자들을 표현했다. 또다른 이전 단계에서 우리는 숫자들을 X 마크로 대체했다. square 자체의 state로 결정되는. 이것이 square가 현재 Board로부터 value prop 받은 것이 무시된 이유다.