✍🏻 [Code Camp_TIL] 13일차: 레이아웃, 글로벌 스타일, font

code_J·2023년 4월 3일

CodeCamp React TIL

TIL

목록 보기

19/41

레이아웃 잡기

레이아웃은 UI의 배치이다. 쉽게 말해, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미한다.

웹페이지를 보면 페이지들의 전체적인 큰 틀(레이아웃)은 동일하고, 세부적인 내용이 다른 경우가 많다. 따라서 레이아웃만 잘 잡아도 프로젝트 전체의 유지보수가 쉬워진다.

그런데 페이지를 만들 때마다 레이아웃을 하나하나 import 해주는 것은 좀 번거롭다. 이거를 한번에 만들 수는 없을까?

header, navigation, banner, footer 등의 공통 component를 만들어주고, 이것들을 하나로 조립하는 index 파일을 만들어주면 된다!

// index 파일

export default function Layout(props:IProps) {
  return(
    <>
    	<LayoutHeader />
    	<LayoutBanner />
    	<LayoutNavigation />
    	<LayoutBodyWrapper>
    		<LayoutSidebar />
    		<LayoutBody>{props.children}</LayoutBody>
    	</LayoutBodyWrapper>
    	<LayoutFooter />
    </>
    )
}

여기서 props.children을 보자. 우리가 지금까지 사용했던 props는 아래 그림의 왼쪽 부분이다. 해당 태그의 자식 태그들은 따로 명시해주지 않더라도, 자동으로 children이란 이름으로 props로 넘어간다.

최종적으로 바디영역이 전체 Layout의 children이 되며, 모든 페이지는 바디영역에 나타나게 된다.

레이아웃 hidden 영역 설정

특정 페이지는 특정 레이아웃이 보이지 않았으면 할 때가 있다. 그럴 때에는 그 레이아웃이 특정 페이지에서 나타나지 않게 조건을 걸어주면 된다.

const HIDDEN_HEADERS = [
	"/12-05-modal-address-state-prev",
  // ...
]

export default function Layout(props) {
  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>
    )
}