[ 35 ] 레이아웃 만들기

_app.tsx 에서 레이아웃 설정하기

_app.tsx 안에 있는 <Component /> 컴포넌트를 Layout으로 감싸고, <Component /> 를 Props.child 로 Layout 컴포넌트에 보낸다.

 

특정 페이지에서 레이아웃의 일부분을 렌더링 하지 않을 때 

router.asPath 로 현재 URL을 가져오고, 상수로 정해놓은 특정 페이지와 일치하면 렌더링 하지 않는다는 조건을 추가한다.

// 변하지 않는 상수값은 함수( 컴포넌트 )  밖에다가 정의한다.
const HIDDEN_HEADERS = [
  "/section13/13-01-library-icon",
  "/section13/13-02/library-star",
];  
  
  
  const router = useRouter();
  const isHiddenHeader = HIDDEN_HEADERS.includes(router.asPath);

return(
      {!isHiddenHeader && <LayoutHeader />}
)

전체코드 

_app.tsx

// import "../styles/globals.css";
import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import type { AppProps } from "next/app";
import "antd/dist/antd.css";
import Layout from "../src/commons/layout";

export default function App({ Component, pageProps }: AppProps): JSX.Element {
  const client = new ApolloClient({
    uri: "http://backend-example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(), // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 자세히 알아보기
  });

  return (
    <ApolloProvider client={client}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloProvider>
  );
}

Layout 컴포넌트 

import { useRouter } from "next/router";
import LayoutBanner from "./banner";
import LayoutFooter from "./footer";
import LayoutHeader from "./header";
import LayoutNavigation from "./navigation";

interface ILayoutProps {
  children: JSX.Element;
}
// 변하지 않는 상수값은 함수 밖에다가 정의한다.
const HIDDEN_HEADERS = [
  "/section13/13-01-library-icon",
  "/section13/13-02/library-star",
];

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

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

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