[번역] Tutorial: Adding Time Travel 3

Showing the Past Moves

과거 행적 보기

 

Since we are recording the tic-tac-toe game’s history, we can now display it to the player as a list of past moves.

우리가 틱택토 게임의 기록을 기록했기 때문에, 우리는 보여줄 수 있다. 선수의 과거 행적을 리스트로.

 

We learned earlier that React elements are first-class JavaScript objects; we can pass them around in our applications. To render multiple items in React, we can use an array of React elements.

우리는 초기에 배웠다. 리액트 요소는 일급 자바스크립트 객체라고; 우리는 우리의 앱에서 객체를 이곳 저곳 보낼 수 있습니다. 리액트에서 여러개의 아이템들을 렌더링하기 위해서 우리는 리액트 요소를 배열로 사용할 수 있습니다.

 

In JavaScript, arrays have a map() method that is commonly used for mapping data to other data, for example:

자바스크립터에선, 배열은 map() 메소드를 가지고 있다. 이 메소드는 데이터를 다른 데이터에 매핑하는데 일반적으로 사용된다. 예:

 

Using the map method, we can map our history of moves to React elements representing buttons on the screen, and display a list of buttons to “jump” to past moves.

map 메소드를 사용하면, 우리는 화면에 버튼을 표현한 리액트 엘리먼트들의 움직임의 기록을 매핑할 수 있고, 과거 동작으로 넘어갈 수 있는 버튼 목록을 표현할 수 있다.

 

Let’s map over the history in the Game’s render method:

게임 렌더 메서드에 history를 매핑해보자.

View the full code at this point

For each move in the tic-tac-toes’s game’s history, we create a list item <li> which contains a button <button>. The button has a onClick handler which calls a method called this.jumpTo(). We haven’t implemented the jumpTo() method yet. For now, we should see a list of the moves that have occurred in the game and a warning in the developer tools console that says:

틱택토 게임 기록의 각각의 움직임에서, 우리는 리스트 아이템인 <li>-버튼을 포함하고 있는-를 만들었다. 버튼은 onClick 핸들러를 가지고 있으며 이는 jompTo 메서드를 호출한다. 우리는 아직 jompTo 메서드를 구현하지 않았다. 이제 우리는 게임에서 발생한 동작 기록을 볼 것이다.  그리고 개발자도구 콘솔에서 오류가 있을 것이다.

Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of “Game”.

Let’s discuss what the above warning means.

위의 경고 문구의 의미에 대해 토론해보자.