[React]Nested Components와 Props

이전 포스트에서 React component를 만드는 방법을 알아보았다. 이번 글에서는 component를 nested(중첩) 시키는 방법과 자식 React component에 데이터를 전달하는 방법에 대해 알아보자.

이전부터 쭉 말해왔지만 React의 가장 큰 장점은 state를 관리하는 것이 정말 쉽다는 것이다. 그 예로 한 component에서 다른 하위 component로 데이터를 쉽게 전달하는 시스템이 있고 그 시스템이 바로 props이다. props는 component에 어떤 인수가 function에 연결되어 있는지 나타내 주는 놈이다.

다음은 props를 사용하는 아주 기본적인 예이다.

var HelloUser = React.createClass({
  render: function(){
    return (
      <div> Hello, {this.props.name}div>
    )
  }
});
ReactDOM.render(<HelloUser name="Tyler"/>, document.getElementById('app'));

위의 코드를 보면 component를 호출할 때 name(Tyler)을 전달한다. 이 속성은 component 내에서 this.props.name으로 불러올 수 있다.

조금 더 복잡한 경우를 생각해보자. 위 예제는 component가 하나였다면 이번에는 두 개의 component에 대해 다루어보자.각각의 component는 부모 component, 자식(하위) component이며, 부모 component는 자식 component에게 props으로 데이터를 전달한다. 먼저 부모 component를 보자.

var FriendsContainer = React.createClass({
  render: function(){
    var name = 'Jaewon Kwon'
    var friends = ['friend1', 'friend2', 'friend3']
    return (
      <div>
        <h3> Name: {name} h3>
        <ShowList names={friends} />
      div>
    )
  }
});

이번에는 자식 Component이다.

var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(friend){
      return <li> {friend} li>;
    });
    return (
      <div>
        <h3> Friends h3>
        <ul>
          {listItems}
        ul>
      div>
    )
  }
});

Array.prototype.map가 익숙하지 않다면, 위의 예제가 조금 어색해 보일 수 있다. map은 새로운 배열을 만들고, 배열의 각 항목에 콜백 함수를 호출하여, 각 배열에 콜백 함수를 호출 한 결과로 새 배열에 채운다. 예를 들면

var friends = ['friend1', 'friend2', 'friend3'];
var listItems = friends.map(function(friend){
  return "
 " + friend + "
";
});
console.log(listItems); // ["
 friend1 
", "
 friend2
", "
 friend3 
"];

위의 결과로 새로운 배열 안에 원래 배열의 각 이름들이