React children

컴포넌트의 자식들을 값으로 받는 Prop

 

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

export default Button;

button 태그에 {text}라는 prop를 전달하는 컴포넌트를 만듦

 

import Button from './Button';

function App (){
	return (
            <div>
                <Button text='던지기'/>
                <Button text='처음부터'/>
            </div>    
    )
}
export default App

를 출력할 수 있다.

 

단순히 보여주는 값을 다룰 때는 prop를 만드는 것 보다는 children을 활용하는 것이 직관적으로 도움이 된다. 

 

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

export default Button;

Button 컴포넌트에 prop을 childern으로 변경해주고 

import Button from './Button';

function App (){
	return (
            <div>
                <Button>던지기</Button>
                <Button>처음부터</Button>
            </div>    
    )
}
export default App

Button컴포넌트에 필요한 값만 작성해주면 된다.