리액트 - children prop

//Button.js

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

export default Button;

//App.js

import Button from './Button';
import Dice from './Dice';

function App(){
    return (
    <div>
        <div>
        <Button text="던지기"/>
        <Button text="처음부터"/>
        </div>
        <Dice color="red" num={2}/>
    </div>
    );
}

 

▼ 리액트에서 단순히 바로 보여줄 값을 다룰때는 어떤 prop 을 만들기보다 children prop을 만드는게 코드를 직관적이게 한다.

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

export default Button;

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

function App(){
    return (
    <div>
        <div>
        <Button>던지기</Button>
        <Button>처음부터</Button>
        </div>
        <Dice color="red" num={2}/>
    </div>
    );
}

html에서 버튼 태그 작성하듯이 여는 태그와 닫는 태그 안에 값을 넣을 수 있다.