children props을 이용한 레이아웃

안녕하세요
블로그 독자 여러분
오늘은 children을 이용하여 레이아웃 짜는 방법을 알게되어 함께 공유해봐요

그럼 시작합니다 ~~

여기 Nav바와 Sidebar바 컴포넌트로 구성된 NavContainer 라는 컴포넌트가 있어요

export const NavContainer:React.FC = ({children}) => {

  return (
    <>
      <Nav />
      <Wrapper>
        <Sidebar />
        {children}
      </Wrapper>
    </>
  );
}

Wrapper는 그냥 display: flex를 주기위해서 있는 아이고 오늘 말하고자 하는 중요한 부분은 {children} 이 부분입니다
이 부분에 바로 저희가 원하는 컴포넌트를 넣을건데요

이렇게요

만약에 위에서 만든 NavContainer를 이용해서 News 페이지를 만든다하면은 이런식으로 쓸 수 있습니다

export const News = () => {

  return (
    <div>
      <NavContainer>
        <NewsPage />
      </NavContainer>
    </div>
  );
};

하지만 만약 {children}을 안쓰고 그냥 감싸버리면 NewsPage 컴포넌트가 나오질 않고

또 그냥 이렇게 병렬로 만들어버리면

  <NavContainer>
  </NavContainer>
  <NewsPage />

레이아웃이 저 밑에 내려가있어 position: absolute를 주고 margin도 주고 굉장히 지저분하고 레이아웃을 잡는데 힘이 듭니다

지금까지 저는 주로 Nav나 Footer, Sidebar와 같은 공용 컴포넌트들이 여러 페이지에 쓰일때 페이지마다 일일이 다 import 해와서 붙여넣는 식으로 했었는데

이렇게 NavContainer 같이 틀을 짜놓은 다음에 거기에 children을 이용하면 공용 컴포넌트들이 필요한 수 많은 페이지들을 그저 가장 바깥쪽으로 감싸기만 하면 되는 것이었습니다