[TIL 13일차]

Grace·2021년 11월 17일

코드캠프 TIL

목록 보기

13/34

value가 지정된 input에 default value주는 방법!!!

value={
                props.address ||
                props.data?.fetchBoard.boardAddress?.address ||
                ""
              }

value값에 변경할 값 || 데이터에서 불러올 값 || 빈 값을 넣어주면
변경한 값이 없을경우(default value) 데이터에서 불러온 값을 기본 값으로 넣어주고
데이터에서 불러올 기본 값도 없을 경우에는 빈값으로 넣어주게된다.

레이아웃 구조

: UI의 배치

props.children

pages 안에 있는 _app.js 에 Component 를 만들어 놓은 레이아웃으로 감싸준다.

 return (
    <>
      <Global styles={globalStyles} />
      <ApolloProvider client={client}>
        <Layout>
          <Component {...pageProps} /> 
          // 위의 index.js 의 pros.children 으로 전달해준다
        </Layout>
      </ApolloProvider>
    </>
  );

컴포넌트들을 return 안에 적어준다.

export default function Layout(props) {
return (
    <Wrapper>
      <LayoutHeader />
      <LayoutBanner />
      <LayoutNavi />
      <SidebarWrapper>
        <LayoutSide/>
        <Body>{props.children}</Body>
      </SidebarWrapper>
      <LayoutFooter />
    </Wrapper>
  );
}

나오게하고싶지 않은 페이지를 배열에 넣어주고 구현해주면된다

import styled from "@emotion/styled";
import { useRouter } from "next/router";
import { ReactChild } from "react";
import Banner from "./banner";
import Footer from "./footer";
import Header from "./header";
import Navigation from "./navigation";

const HIDDEN_HEADERS = ["/12-05-modal-address-state-prev", "1", "2"];
interface ILayoutProps {
  children: ReactChild;
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: brown;
`;

const BodyWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  width: 100%;
`;

const Body = styled.section`
  width: 100%;
  height: 500px;
`;

const SideBar = styled.div`
  width: 500px;
  height: 500px;
  background-color: whitesmoke;
`;

const Layout = (props: ILayoutProps) => {
  const router = useRouter();
  const isHiddenHeader = HIDDEN_HEADERS.includes(router.asPath);

  return (
    <Wrapper>
      {!isHiddenHeader && <Header />}
      <Banner />
      <Navigation />
      <BodyWrapper>
        <SideBar>사이드바영역입니다.</SideBar>
        <Body>{props.children}</Body>
      </BodyWrapper>
      <Footer />
    </Wrapper>
  );
};

export default Layout;