인프런 커뮤니티 질문&답변
작성한 질문수
Sidebar & Header 컴포넌트 등 레이아웃 설정 방식
해결된 질문
작성
·
40
0
강의에서 레이아웃을 담당하는 Sidebar, Header 컴포넌트를 만들때 Props으로 children을 받고 렌더링 하는 방식으로 만들었는데 이렇게 만든 이유가 있을까요?
지금까지 진행한걸 계층별로 생각해보면
최상위 Root->Sidebar->Header->... 등 형제 노드는 없고 자식 노드 형태로 계속 깊어지는구조.
------------
아래의 방법과 비교해서 궁금합니다.
아래 코드와 동일하지 않더라도,Sidebar, Header 컴포넌트가 children과 분리된 구조.
<body>
<Sidebar/>
<div>
<Header/>
<main>{children}</main>
</div>
</body>답변 3
0
시멘틱 태그를 적용시키면 아래처럼 작성해도 좋습니다.
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<div id="layout">
<aside>
<Sidebar />
</aside>
<main>
{children}
</main>
<footer>
<PlayerWrapper />
</footer>
</div>
</ThemeProvider>
</body>
</html>0
안녕하세요. ~
나중에 RootLayout에 Player가 하나 추가 됩니다.
<html lang="en">
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<Sidebar>{children}</Sidebar>
<PlayerWrapper />
</ThemeProvider>
</body>
</html>
나중에 (Site) 루트 페이지는 다음 모습이구요.
import React from "react";
import Category from "./components/Category";
import PagePadding from "@/components/PagePadding";
import PlayListCarousel from "@/components/PlayListCarousel";
import { dummyPlaylistArray, getPlaylistById } from "@/lib/dummyData";
import UserIcon from "@/components/UserIcon";
const page = async () => {
const dummyPlaylistArray1 = [...dummyPlaylistArray];
const dummyPlaylistArray2 = [await getPlaylistById(1)];
const dummyPlaylistArray3 = [await getPlaylistById(2)];
const dummyPlaylistArray4 = [await getPlaylistById(3)];
return (
<PagePadding>
<div className="min-h-[600px]">
<div className="mt-9"></div>
<Category />
<div className="mt-12"></div>
<PlayListCarousel
playlistArray={[...dummyPlaylistArray1]}
Thumbnail={
<div className="w-[56px] h-[56px] ">
<UserIcon size={"lg"} />
</div>
}
title="다시 듣기"
subTitle="도도"
/>
<div className="mt-20"></div>
<PlayListCarousel
playlistArray={[...dummyPlaylistArray2]}
title="케이시 - Full Bloom"
subTitle="새로운 앨범"
/>
<div className="mt-20"></div>
<PlayListCarousel
playlistArray={[...dummyPlaylistArray3]}
title="커뮤니티 제공"
/>
<div className="mt-20"></div>
<PlayListCarousel
playlistArray={[...dummyPlaylistArray4]}
title="커버 및 리믹스"
/>
</div>
</PagePadding>
);
};
export default page;
RootLayout에 아래처럼 해주셔도 상관없습니다.
단, 모든 Layout에서 사용하는 Root Layout 이므로 데이터 패칭을 최소화 하여 빠른 로딩을 하도록, 최대한 간결하게 작성하는게 좋습니다. ~
<body>
<Sidebar/>
<div>
<Header/>
<main>{children}</main>
</div>
</body>0
안녕하세요, 인프런 AI 인턴입니다. 정재웅님 님의 질문에 대해 답변드리겠습니다.
React에서 레이아웃을 구성할 때, Sidebar, Header 등과 같은 컴포넌트를 만들 때 props로 children을 받고 렌더링하는 방식을 사용하는 이유는 컴포넌트의 재사용성과 유연성을 높이기 위함입니다. 다음은 이러한 방식의 장점입니다:
재사용성: 하나의 레이아웃 컴포넌트를 만들어 여러 페이지에서 재사용할 수 있습니다.
children을 사용하면 이 컴포넌트에 원하는 컨텐츠를 넣어 다른 레이아웃을 쉽게 구현할 수 있습니다.유연성:
children은 다양한 형태와 내용을 담을 수 있기 때문에, 필요에 따라 언제든지 중간의 컨텐츠를 교체하거나 추가할 수 있습니다.유지보수 용이성: 코드의 각 컴포넌트가 특정 역할만 갖고 독립적으로 작동하게 함으로써 코드의 가독성과 유지보수성을 높일 수 있습니다.
정재웅님이 제시하신 구조와 비교했을 때, children 방식은 보다 유연한 레이아웃을 구현하는 데 적합합니다. 특히 페이지마다 다른 컨텐츠 구조를 필요로 할 때 유리합니다. 한편, 구조를 고정된 상태로 유지하고 싶다면 제시하신 방법도 고려할 수 있습니다.
더 이상 설명드린 것 외에 다음과 같은 참고 게시물들이 도움이 될 수 있습니다:
- 질문있습니다.: 페이지 컴포넌트 구조에 대한 비슷한 질문에 대한 답변이 있습니다.
- 코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?: 컴포넌트 구조나 코드 이해에 대한 방법에 도움이 될 수 있는 답변이 포함되어 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.