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;
글로벌 스타일
모든 컴포넌트에 스타일을 적용해주는 방법
폰트 경량화 버전 받아야됩니다!