[번역] Tutorial: Overview 3

Passing Data Through Props

props를 통해서 데이터 넘기기

 

To get our feet wet, let’s try passing some data from our Board component to our Square component.

입문으로, board 컴포넌트에서 square 컴포넌트로 일부 데이터를 넘겨보자.

 

We strongly recommend typing code by hand as you’re working through the tutorial and not using copy/paste. This will help you develop muscle memory and a stronger understanding.

우리는 너가 튜토리얼을 공부할 때 손으로 코드를 치면서 하는 것을 강력하게 추천한다. 복사 붙여넣기를 하지 않고. 이 방법은 너가 기억 근육을 개발하고 이해를 더 잘 하도록 도와준다.

 

In Board’s renderSquare method, change the code to pass a prop called value to the Square:

board의 renderSquare 메소드에서 Square 태그에 "value"로 명명한 prop을 전달하는 코드로 바꿔라.

 

Change Square’s render method to show that value by replacing {/* TODO */} with {this.props.value}:

square렌더 메소드를 바꿔라. {/* TODO */}를 {this.props.value}로 바꿈으로써 value를 표시해라.

Before:

After: You should see a number in each square in the rendered output.

후 : 렌더된 결과에서 각각의 square안에 숫자가 표시됩니다.

View the full code at this point

Congratulations! You’ve just “passed a prop” from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children.

축하해! 너는 방금 prop을 넘겨줬어. 부모 Board 컴포넌트에서 자식인 Square 컴포넌트로. props를 전달하는 것은 리액트 앱에서 정보를 부모에서 자식으로 흐르게 하는 방법이야.