[번역] Tutorial: Adding Time Travel 2

Lifting State Up, Again

다시 state를 올리자.

 

We’ll want the top-level Game component to display a list of past moves. It will need access to the history to do that, so we will place the history state in the top-level Game component.

우리는 상위 레벨 game 컴포넌트를 원한다. 과거 동작 리스트를 보여주기 위해서. 그렇게 하기 위해서는 기록에 접근할 필요가 있다. 그래서 우리는 상위레벨인 game 컴포넌트에 history state를 놓을 것이다.

 

Placing the history state into the Game component lets us remove the squares state from its child Board component. Just like we “lifted state up” from the Square component into the Board component, we are now lifting it up from the Board into the top-level Game component. This gives the Game component full control over the Board’s data, and lets it instruct the Board to render previous turns from the history.

게임 컴포넌트에 history state를 놓는 것은 우리로 하여금 자식인 board 컴포넌트의 squares state를 지울수 있게 해준다. 마치 state올리기-square 컴포넌트에서 board 컴포넌트로-와 같이 우리는 board에서 최상위레벨인 game 컴포넌트로 들어올릴 것이다. 이것은 게임 컴포넌트가 모든 board의 데이터를 조정할 수 있고, board에게 기록으로부터 온 이전 단계를 렌더링하도록 지시할 수 있다.

 

First, we’ll set up the initial state for the Game component within its constructor:

먼저, 생성자함수 내에 게임 컴포넌트의 초기 state를 설정해준다.

Next, we’ll have the Board component receive squares and onClick props from the Game component. Since we now have a single click handler in Board for many Squares, we’ll need to pass the location of each Square into the onClick handler to indicate which Square was clicked. Here are the required steps to transform the Board component:

다음으로, board 컴포넌트는 게임 컴포넌트로부터 squares와 onClick 속성을 받는다. 우리가 board에서 많은 square들에 대해 단일 클릭 핸들러를 가지고 있으므로 onClick 핸들러 안에 각각의 square들의 위치를 넘겨줄 필요가 있다. 어떤 square가 클릭되었는지 표시하기 위해서. 보드 컴포넌트를 변경하기 위해 필요한 단계는 여기있다.

• Delete the constructor in Board.
• Replace this.state.squares[i] with this.props.squares[i] in Board’s renderSquare.
• Replace this.handleClick(i) with this.props.onClick(i) in Board’s renderSquare.
• board의 생성자를 지워라
• this.state.squares[i]를 this.props.squares[i]로 바꿔라. board renderSquare안에 있는.
• this.handleClick(i)를 this.props.onClick(i)로 바꿔라. board renderSquare안에 있는.

The Board component now looks like this:

board 컴포넌트는 이와 같이 생겼다.

We’ll update the Game component’s render function to use the most recent history entry to determine and display the game’s status:

우리는 게임 컴포넌트의 render 함수를 업데이트 할거야. 가장 최근 기록을 사용하여 게임의 상태를 표시하기 위해서.

 

Since the Game component is now rendering the game’s status, we can remove the corresponding code from the Board’s render method. After refactoring, the Board’s renderfunction looks like this:

game 컴포넌트는 게임의 status를 렌더링하기 때문에 우리는 board의 렌더 메소드로부터 해당 코드를 지울 수 있다.

리팩토링한 후에 board의 렌더 함수는 이와 같습니다.

 

Finally, we need to move the handleClick method from the Board component to the Game component. We also need to modify handleClick because the Game component’s state is structured differently. Within the Game’s handleClick method, we concatenate new history entries onto history.

마지막으로, handleclick 메서드를 board 컴포넌트에서 game 컴포넌트로 옮길 필요가 있다. 우리는 또한 handleClick을 수정할 필요가 있다. 왜냐하면 게임 컴포넌트의 state는 다르게 구조화되어 있기 때문이다. 게임의 handleClick 메서드 안에서, 기록에 새로운 기록항목을 이을 수 있다.

Note

Unlike the array push() method you might be more familiar with, the concat() method doesn’t mutate the original array, so we prefer it.

배열 push() 메서드와 달리-아마 너가 더 친숙하게 느낄, concat() 메서드는 원래 배열을 수정하지 않는다. 우리는 이것을 더 선호한다.

At this point, the Board component only needs the renderSquare and render methods. The game’s state and the handleClick method should be in the Game component.

이 시점에서, board 컴포넌트는 오직 renderSquare와 render메소드만 필요하다. 게임의 state와 handleClick 메서드는 게임 컴포넌트에 있어야 한다.

 

View the full code at this point