React - props.children

아래 코드를 살펴보자.

//Main.js
import React, { Fragment } from "react";
import Button from "./components/Button/Button";

const Main = () => {
  return (
    <Fragment>
      <div className="main">
        <Button>1</Button>
        <Button>2</Button>
        <Button>3</Button>
      </div>
    </Fragment>
  );
};

export default Main;

• Main.js에서 <button>1</button> 부분을 보면 1은 button태그의 자식처럼 보인다!
• <Button>태그 안에 있는 저 숫자들만 Button컴포넌트에 props로 넘겨주고 싶다면?

<Button>
  1 {/*여기 있는 숫자를 넘기고 싶어!*/}
</Button>

//Button.js
import React, { Fragment } from "react";
import "./Button.scss";

//{ children } === props.children
const Button = ({ children }) => {
  return (
    <Fragment>
      <button>
        {children}번 버튼
      </button>
    </Fragment>
  );
};

export default Button;

• props.children은 태그 사이에 있는 자식들을 props로 넘길 수 있게 해준다.