3. Props

1) Hello Props World

Props의 기초인 Hello world를 만들어 봅시다~ 편의상 하나의 js에 클래스를 모두 넣었습니다.

UI 개발자의 놀이터인 CodePen.io를 사용하시면 좋습니다.

index.html

<div id="root"></div>

App.js

class App extends React.Component{
  render(){
    return (
      <div>
        <h4>{this.props.name}</h4>
        <pre>
          {this.props.children}
        </pre>
      </div>
    );
  }
}

ReactDOM.render(<App name="React Tutorial">Hello world</App>, document.getElementById("root"));

결과화면

Props란?

props란 컴포넌트 내부의 immutable data. 즉, 변화되지 않는 데이터입니다.

해당 컴포넌트를 사용할때 넘겨주는 인자값(Parameter)입니다.

해당 예제에서는 ReactDOM.render부분에서 App컴포넌트를 사용할때 인자값으로 name값을 넘겼죠?

이렇게 넘긴 값은 App 컴포넌트 내부에서 this.props 객체에 담기게 됩니다.

따라서, 넘겨받은 인자값을 App 컴포넌트 내부에서는 this.props.name으로 사용할 수 있는 것이죠

this.props.children은 뭔가요?

this.props.children은 컴포넌트 사용시에 Body 부분을 의미합니다. 해당 예제에서는 App 컴포넌트의 Body부분입니다.