React children prop을 이용한 공통 UI Component 제작

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을 잘 활용한다면 컴포넌트 단위로 개발하는데 큰 도움이 될 것이다. 잘 활용할 수 있도록 노력해야겠다.