Children

React의 prop에는 Children이라는 기본적으로 존재하는 prop이 있다.

기존에는 다음과 같이 prop을 사용할 수 있었다.

// Button.js
function Button({ text }) {
  return <button>{text}</button>;
}

export default Button;

// App.js
import Button from './Button';

function App() {
  return (
    <div>
      <Button text="+" />
      <Button text="초기화" />
      <Button text="-" />
    </div>
  )
}

Children을 적용하면 다음과 같은 코드를 작성할 수 있게 된다.

// Button.js
function Button({ children }) {
  return <button>{children}</button>
}

export default Button;

// App.js
import Button from './Button';

function App() {
  return (
    <div>
      <Button>+</Button>
      <Button>초기화</Button>
      <Button>-</Button>
    </div>
  )
}

Children을 사용함으로서 가독성이 좋아지고 코드가 간결해진다.