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을 이용하면 공용 컴포넌트들이 필요한 수 많은 페이지들을 그저 가장 바깥쪽으로 감싸기만 하면 되는 것이었습니다
Author And Source
이 문제에 관하여(children props을 이용한 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@taehyunkim/children-props을-이용한-레이아웃저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)