프로젝트를 위한 레이아웃 초기 세팅을 진행함. vite-react로 리액트 초기 세팅을 하고 스타일링에는 tailwindCSS를 사용했다.
우선 라우팅을 위해서 Router.tsx 파일을 만들고 라우팅을 진행한다.
Router
// App.js
import Router from "./Router";
function App() {
return (
<Router />
);
}
export default App;// Router.js
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Layout from "./Layout";
export default function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
)
}/ 를 Home으로 연결해주는 기본 설정은 끝냄.
Layout 컴포넌트
이후 프로젝트에 전체적으로 주고 싶은 스타일링(좌우, 상하 여백 및 header와 footer 등) 은 어떻게 할까 고민하다 전체 스타일링을 위한 Layout 컴포넌트를 따로 만들기로 결정.
// Layout.js
export default function Layout() {
return (
<div className="flex min-h-screen flex-col items-center">
<Header />
<div className="flex max-w-[1280px] flex-1 flex-col items-center pt-[80px]">
<main className="w-full">
<Outlet />
</main>
<img src={vector} className="fixed left-0 top-[-20px] -z-50" />
</div>
<Footer />
</div>
);
}header와 footer가 포함된 레이아웃. <div className="flex min-h-screen flex-col items-center"> 는 화면 전체에 대한 메인 레이아웃 이고, <div className="flex min-w-[1280px] flex-1 flex-col items-center border border-black pt-6"> 는 헤더 밑에 나오는 콘텐츠에 대한 콘텐츠 레이아웃 이다.
메인 레이아웃
<div className="flex min-h-screen flex-col items-center">flex, flex-col, items-center 를 통해 요소들을 세로로 렌더링하면서 가운데로 모아줌. 또한 min-h-screen 이 들어갔는데 이는 콘텐츠 레이아웃의 flex-1과 같이 콘텐츠가 없을 때도 기본적으로 footer가 바닥에 붙어있도록 한다.
-
footer를 고정시키지 않은 경우
-
footer를 고정시킨 경우
콘텐츠 레이아웃
<div className="flex max-w-[1280px] flex-1 flex-col items-center pt-[80px]">flex, flex-col, items-center 를 사용해 마찬가지로 콘텐츠를 세로 정렬한다. flex-1 가 콘텐츠 레이아웃에만 있기 때문에 남은 공간을 모두 차지함. 때문에 콘텐츠가 얼마 없어도 공간을 차지해 footer를 바닥에 붙여버리는 것이 가능하다. 처음엔 min-w-[1280px] 를 통해 최소 너비를 1280px 로 했으나, 생각해보니 최소 너비가 아닌 최대 너비를 설정해서 컨텐츠 크기를 제한 해야 했기에 max-w-[1280px] 로 바꿔줌.
<main>
main 이 컨텐츠를 전체적으로 한번 감싸주는게 구조상 맞다고 생각해서 레이아웃에 포함시킴.
<Outlet />
이렇게 만든 레이아웃을 전체적으로 적용시키기 위해 react-router-dom의 <Outlet /> 을 사용했다.
<Outlet />: 부모 route에서 렌더링되는 자식 요소들.
Router에 추가적인 처리를 해준다.
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./Home";
import Layout from "./Layout";
export default function Router() {
return (
<BrowserRouter>
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<Home />} />
// 추가로 라우팅 작성..
</Route>
</Routes>
</BrowserRouter>
)
}이제 <Route element={<Layout />}> 내부에 라우팅을 작성해주면 Layout 이 적용된다.
레퍼런스:
