[번역] Tutorial: Adding Time Travel 5

Implementing Time Travel

시간 여행 구현하기

 

In the tic-tac-toe game’s history, each past move has a unique ID associated with it: it’s the sequential number of the move. The moves are never re-ordered, deleted, or inserted in the middle, so it’s safe to use the move index as a key.

틱택토 게임 기록에서, 각각의 과거 move들은 특별한 ID를 가지고 있다. 그것과 연계된: 그것은 move의 연속된 숫자입니다. moves는 절대 재정렬되거나 삭제되거나 중간에 삽입되지 않으므로 키로 move의 index를 사용하는 것은 안전합니다.

 

In the Game component’s render method, we can add the key as <li key={move}> and React’s warning about keys should disappear:

게임 컴포넌트의 render 메소드에서, 키를 삽입하면 키에 대한 리액트 경고가 사라질 것이다.

View the full code at this point

 

Clicking any of the list item’s buttons throws an error because the jumpTo method is undefined. Before we implement jumpTo, we’ll add stepNumber to the Game component’s state to indicate which step we’re currently viewing.

어떤 리스트 아이템 버튼을 클릭하든 에러가 발생한다. 왜냐하면 jumpTo 메소드가 아직 구현되지 않았으니까. 우리가 jumpTo를 구현하기 전에, stepNumber를 추가할 것이다. 게임 컴포넌트의 state에다가. 우리가 현재 보는 단계가 어떤 것인지 가리키기 위해서.

 

First, add stepNumber: 0 to the initial state in Game’s constructor:

먼저, stepnumber를 0으로 state 초기화해라. 게임 생성자함수에서.

 

Next, we’ll define the jumpTo method in Game to update that stepNumber. We also set xIsNext to true if the number that we’re changing stepNumber to is even:

다음으로, game에서 jumpTo 메소드를 정의할 것이다. stepnumber를 업데이트 시키는. 또한 우리는 xIsNext가 true가 되도록 설정할 것이다. 우리가 stepNumber를 바꿀 숫자가 짝수일때.

 

We will now make a few changes to the Game’s handleClick method which fires when you click on a square.

우리는 몇가지 변화를 만들꺼야. 게임의 너가 square를 클릭할 때 발생하는 handleClick 메소드에서. 

 

The stepNumber state we’ve added reflects the move displayed to the user now. After we make a new move, we need to update stepNumber by adding stepNumber: history.length as part of the this.setState argument. This ensures we don’t get stuck showing the same move after a new one has been made.

우리가 추가한 stepNumber state는 현재 유저가 표시되는 움직임을 반영해. 새로움 움직임을 만든 뒤에 우리는 stepNumber를 업데이트할 필요가 있어. 는 this.setState 인수의 부분으로써 stepNumber history.length를 추가하는 방식으로. 이것은 확실히 보장한다. 우리가 만들어진 새로운 것 뒤에 같은 조치가 취해지지 않을 것이라는 걸.

 

We will also replace reading this.state.history with this.state.history.slice(0, this.state.stepNumber + 1). This ensures that if we “go back in time” and then make a new move from that point, we throw away all the “future” history that would now become incorrect.

우리는 또한 this.state.history를 his.state.history.slice(0, this.state.stepNumber + 1)로 읽는 대신에. 이것은 확실히 보장하다. 만일 우리다 뒤로 간다면 그 포인트의 새로운 움직임을 만들 때, 잘못된 모든 미래의 기록을 버리는 것이다.

 

Finally, we will modify the Game component’s render method from always rendering the last move to rendering the currently selected move according to stepNumber:

마지막으로 게임 컴포넌트의 렌더 메소드를 수정할 것이다. 마지막 움직임을 렌더링하는 것에서부터 stepNumber에 따른 현재 선택된 움직임을 렌더링하는 것까지

 

If we click on any step in the game’s history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.

만약 우리가 게임의 기록에서 어떤 단계를 클릭하더라도 틱택토 게임판은 즉시 업데이트할 것이다. board가 현재 단계가 발생한 뒤에 어떻게 보이는지에 대해.

View the full code at this point