[React.js] props, children

props?

부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 때 사용한다.

예전에 Vue.js를 공부할 때에도 공부했었던 props다. Vue에서도 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 때 사용하는데, 주로 컴포넌트간 데이터를 주고 받을 때 사용한다.

import React from 'react';

//부모 컴포넌트
function App() {
  <div>
    <MyComponent name="React.js"></MyComponent>
  </div>
}


// 자식 컴포넌트
function MyComponent(props) {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}

props의 기본 값 설정 (defaultProps)

import React from 'react';

// 자식 컴포넌트
function MyComponent(props) {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}
MyComponent.defaultProps = {
  name:'기본 이름'
}

props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때
✔ propsType ✔을 사용한다.

우선 import를 통해 propsTypes를 불러온다.

import React from 'react';
import Proptypes from 'prop-types';

// 자식 컴포넌트
function MyComponent(props) {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}
MyComponent.defaultProps = {
  name:'기본 이름'
}
MyComponent.PropType = {
  name:PropTypes.string
} // props.name은 무조건 string 타입으로 전달해야 함.

children?

태그 사이의 내용을 보여주는 props이다.

import React from 'react';

//부모 컴포넌트
function App() {
  <div>
    <MyComponent>children</MyComponent>
  </div>
}

// 자식 컴포넌트
function MyComponent(props) {
    return(
      <div>안녕하세요, 제 이름은 {props.name}입니다.
      children값은 {props.children}입니다.</div>
      )
}
MyComponent.defaultProps = {
  name:'기본 이름'
}
// 출력결과 : 안녕하세요, 제 이름은 기본 이름 입니다. children값은 children입니다.