정식 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>
)
}
'IT > React + TypeScript' 카테고리의 다른 글
package-lock.json 또는 yarn.lock 왜 필요한가? (0) | 2020.01.06 |
---|---|
정말 쉽게 Dispatch & states 를 Redux Hooks 사용하기 (0) | 2019.06.26 |
React+ Redux 자식 컴포넌트에 connect시 ref 접근방법 (redux 6버전 이상) (0) | 2019.06.10 |
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. (2) | 2019.03.29 |
Default tslint 설정하는법??? (0) | 2018.05.09 |