React - Props, Children

Props

React에서는 Component를 다른 Component로 import해서 사용할 수 있다.
import하는 Component를 부모라 칭하고, import되는 Component를 자식이라고 칭한다.

2개의 Component사이에는 부모-자식 관계가 형성된다.

부모Component에서 자식Component로 여러가지 데이터들을 넘겨줄 수 있는데,
이를 props라고 한다.

// 부모 Component
import React from "react";
import Child from "./Child"

class Parent extends React.Component {
  render() {
    return <div><Child /></div>
  }
}

export default Parent;

// 자식 Component
import React from "react";

class Child extends React.Component {
  render() {
    return <div>Enjoywater</div>
  }
}

export default Child;

위 코드처럼 부모-자식 관계가 형성이 되면 Parent에서 Child로 데이터를 넘겨줄 조건이 완성된다.

데이터를 넘겨주기 위해서는 import한 Child Component에 인라인으로 작성해서 넘겨주어야 한다.

// 부모 Component
import React from "react";
import Child from "./Child"

class Parent extends React.Component {
  render() {
    return <div><Child name="Enjoywater"/></div>
  }
}

export default Parent;

// 자식 Component
import React from "react";

class Child extends React.Component {
  render() {
    return <div>{this.props.name}</div>
  }
}

export default Child;

Parent에서 작성한 name="Enjoywater"라는 코드가 Child에서는 this.props 객체에 담기게 된다.
name은 key, "Enjoywater"는 value가 된다.

Children

위에서는, 부모 Component에서 인라인으로 props를 넘겨주었다.
하지만 이 외에 props객체 속 children으로 다양한 데이터를 넘겨줄 수 있다.

// 부모 Component
import React from "react";
import Child from "./Child"

class Parent extends React.Component {
  render() {
    return <Child>Enjoywater</Child>
  }
}

export default Parent;

// 자식 Component
import React from "react";

class Child extends React.Component {
  render() {
    return <div>{this.props.children}</div>
  }
}

export default Child;

인라인이 아닌 태그와 태그사이에 컴포넌트를 포함한 다양한 값들을 넘겨줄 수 있다.