레이아웃 만들기

레이아웃 : UI의 배치

많이 보이는 형태

헤더, 사이드바, 푸터는 한번만 만들고 바디만 바꿔가며사용

코드로 나타내면 이런형식

실습하기

layout 페이지

const HIDDEN_HEADERS = [
    "/section13/13-01-library-icon",
    "/section13/13-02-library-star"
]

interface ILayoutProps{
    children: JSX.Element;
}

export default function Layout(props:ILayoutProps):JSX.Element {
    const router = useRouter();
    console.log("현재 주소")
    console.log(router.asPath)

    const isHiddenHeader = HIDDEN_HEADERS.includes(router.asPath);

    return(
        <>
            {!isHiddenHeader && <LayoutHeader></LayoutHeader>}
            <LayoutBanner></LayoutBanner>
            <LayoutNavigation></LayoutNavigation>
            <div style={{height:"500px", display:"flex", }}>
                <div style={{width:"30%", backgroundColor:"orange"}}>사이드바</div>
                <div style={{width:"70%"}}>{props.children}</div>
            </div>
            <LayoutFooter></LayoutFooter>
        </>
    )
}

각각 LayoutHeader, LayoutBanner, LayoutNavigation, LayoutFooter 에서 만든걸 가져오고

HIDDEN_HEADERS에 입력한 주소는
const router = useRouter(); 와 router.asPath로 현재주소와 비교해서
{!isHiddenHeader && <LayoutHeader></LayoutHeader>}
을 통해 특정 페이지에서만 가릴 수 있도록 만들 수 있다.