[React] children

Button.js 를 생성후 다음 코드를 입력한 뒤,

function Button({ text }) { // Button 태그 안, text prop 을 보여주는 함수
    return <button>{text}</button>
}

export default Button;

 

App.js 에 text 에 문자열을 할당해주면,

import Button from "./Button";
import Dice from "./Dice";

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

export default App;

이처럼 버튼을 확인할 수 있음.

 

---

[children]

 

JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 된다.

 

다음처럼 코드를 수정하면,

function Button({ children }) { // Button 태그 안, text prop 을 보여주는 함수
    return <button>{children}</button>
}

export default Button;

import Button from "./Button";
import Dice from "./Dice";

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

export default App;



똑같은 결과가 나오게 됨.

componenet 함수에서 따로 가공하지 않고, 단순히 보여주기만 할 모습은 children prop 을 활용할 수 있다.