children prop을 이용하여 공통 UI를 만드는 작업을 해보았다.
const Container = ({ children }) => {
return (
<div>
<Header />
{children}
<Footer />
</div>
);
};
기본 형태는 위와 같다.
사용 방법
const component = () => {
const props = {}
return (
<Container props={props}>
<div>
페이지 내용
</div>
</Container>
);
};
각 component에서 페이지 내용을 Container component로 감싼다.
Header와 Footer에 전달할 props를 Container component에 보낼 수 있다.
const Container = ({ children, props }) => {
return (
<div>
<Header head={props.head} />
{children}
<Footer foot={props.foot} />
</div>
);
};
Container component에서 Header와 Footer component에 props를 전달한다.
children prop을 잘 활용한다면 컴포넌트 단위로 개발하는데 큰 도움이 될 것이다. 잘 활용할 수 있도록 노력해야겠다.