IT/React + TypeScript

[React] Children을 쓰는 이유?

차가운남자 2019. 6. 25. 20:40

정식 React 참고 문서에는 구성(composition) vs 상속(inheritance)에 Children을 쓰는 이유를 나와있다.
(https://reactjs-kr.firebaseapp.com/docs/composition-vs-inheritance.html)

간단히 말하면 children재사용을 위해서 사용된다.

자식 컴포넌트
const Picture = (props) => {  
    return (  
        <div>  
        <img src={props.src}/>  
        {props.children}  
        </div>  
    )  
}
부모 컴포넌트
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          <버튼,이미지 등 자신만의 컴포넌트>  <= 여기에 {this.props.children} 안에 어떤 컴포넌트가 들어오든 자식컴포넌트에서 표출이 된다. 
      </Picture>
    </div>
  )
}