[React] Syntax | 02. children prop

React에는 기본적으로 제공되는 prop이 있는데, 그것이 바로 children prop입니다.

children은 컴포넌트의 여는 태그<>와 닫는 태그</> 사이에 입력된 값을 받는 prop입니다.

 

아래 코드는 'but A', 'but B'라는 이름의 버튼 두 개를 출력합니다.

이런 경우처럼 단순히 보여지기만 하는 값을 다룰 때는 좀 더 직관적으로 코드를 작성할 수 있습니다.

// *** Button.js *** //

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

export default Button;

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

function App(){
  return(
    <div>
      <Button text="but A" />
      <Button text="but B" />
    </div>
  );
}
export default App;

아래 코드는 Button 컴포넌트에서 text 대신 childern prop을 활용한 경우입니다.

이 경우, Button.js 파일을 보지 않더라도 Button 컴포넌트 태그 사이의 값이 버튼의 텍스트로 들어간다는 것을 쉽게 이해할 수 있습니다.

// *** Button.js *** //

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

export default Button;

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

function App(){
  return(
    <div>
      <Button>but A</Button>
      <Button>but B</Button>
    </div>
  );
}
export default App;

물론, 이 children prop도 다른 prop들과 함께 사용할 수 있습니다.

function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>;
}

export default Button;