오늘은 페이지 Layout 전체적용 방법에 대해서 배웠다.
Layout이란 홈페이지 구성을 어떻게 배치할 것인지에 대한 내용이다.
Layout
Layout은 정해진 틀은 없다.
위 Layout은 총6개의 영역으로 나눈 레이아웃이다.
사용하는 서비스에 따라서 더적은 영역의 레이아웃이 될수도 있고 더 많아질수도 있다.
또한 각 페이지 마다 필요없는 영역을 가려줄수도 있다.
Layout 이미지를 매번 선언해야 할까?
공통적으로 들어가는 영역들은 매번 선언해줄 필요가 없다.
공통 컴포넌트에 저장시킨 후 매번 동일한 내용을 불러오면 된다.
Layout 공통적용 방법
1.각 영역 폴더생성
2.index파일로 뭉치기
3.app.js파일에 합치기
4.globalcss 적용
공통적으로 적용하기 위해서는 몇가지 파일들을 설정해야 한다.
Layout-step1 각 영역 폴더생성
먼저 나눌 영역에 따라서 components폴더를 나눈다.
components > commons > layout 구조로 폴더를 만든뒤 적용할 레이아웃의 숫자만큼 폴더를 만들어 준다.
body 영역은 각 페이지에 따라서 들어가기때문에 안만들어 줘도 된다.
위에서 만든 폴더구조를 가지고 container/presenter 형식으로 파일을 분리한다.
헤더 container
import LayoutHeaderUI from "./LayoutHeader.presenter";
export default function LayoutHeader() {
return <LayoutHeaderUI></LayoutHeaderUI>;
}헤더 presenter
import { Wrapper } from "./LayoutHeader.styles";
export default function LayoutHeaderUI() {
return <Wrapper></Wrapper>;
}헤더 styles
import styled from "@emotion/styled";
export const Wrapper = styled.div`
background-color: beige;
width: 100%;
height: 300px;
`;Layout-step2 index 파일로 뭉치기
import styled from "@emotion/styled";
import LayoutHeader from "./layout/header/LayoutHeader.container";
import LayoutNav from "./layout/nav/LayoutNav.container";
import LayoutFooter from "./layout/footer/LayoutFooter.container";
const Wrapper = styled.div``;
const Body = styled.div``;
const NavWrapper = styled.div`
display: flex;
`;
export default function Layout(props) {
return (
<Wrapper>
<LayoutHeader></LayoutHeader>
<NavWrapper>
<LayoutNav></LayoutNav>
<Body>{props.children}</Body>
</NavWrapper>
<LayoutFooter></LayoutFooter>
</Wrapper>
);
}
영역에 맞게 나눈 파일들을 하나의 index.js로 모아준다.
그리고 생각하는 Layout에 맞춰서 태그들을 넣어준다.
해당 레이아웃은 Header를 가장 상단에 배치한후 LayoutNav와 Body를 동일선상 배치 가장 하단부분에 Footer를 배치하려고 한다.
여기서 작성시 주의사항은 {props.children} 부분이다.
기존의 props 사용법과는 조금 다른부분이 있는데 이런식으로 사용하면 Body 영역의 모든 태그들이 자동으로 children이란 이름으로 props로 넘어가게 된다.
app.js파일에 합치기
<>
<Global styles={globalStyles} />
<ApolloProvider client={client}>
<Layout>
<Component {...pageProps} />
</Layout>
</ApolloProvider>
</>한군데에 모은 index파일을 불러와서 component파일에 감싸주면 전체적으로 적용이 된다.
globalcss 적용
먼저 app.js와 동일한 위치에 있는 스타일 정의 index.js를 찾아서 모두 주석처리 해준다.
styles 파일을 만든후 globalStyles.js 파일을 만들어준다.
globalStyles.js 파일에는 전체 영역에 포함되는 css, 폰트 스타일등을 정의해줄수 있다.
작성 예시
import { css } from "@emotion/react";
export const globalStyles = css`
* {
margin: 0;
box-sizing: border-box;
}
`;
공통 Layout 적용 예시
이런식으로 모든페이지에 공통적으로 레이아웃을 적용시킬수 있다.
