[React / ts] Book Store 만들기 - ② 레이아웃 구성, 글로벌 스타일 적용

레이아웃 구성

현재 만들고자 하는 Book Store에는 여러 가지 페이지들이 존재한다.

그리고 각 페이지에는 Header, Footer와 같이 공통적으로 사용되는 부분들이 존재한다.

 

 

// Home.tsx

import Footer from "../components/common/Footer";
import Header from "../components/common/Header";

function Home() {
  return (
    <>
      <Header />
      <div>Home body</div>
      <Footer />
    </>
  );
}

export default Home;

 

이를 위해 다음과 같이 Components 폴더에 Header와 Footer를 정의하고 페이지마다 활용할 수 있을 것이다.

위 방법을 사용하면 코드를 재사용하여 확실히 깔끔해지는 면이 있지만, 더 좋은 방법이 있다.

 

// Layout.tsx

import React from "react";
import Footer from "../common/Footer";
import Header from "../common/Header";

interface LayoutProps {
  children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
};

export default Layout;

 

이번에는 Layout.tsx에 Header와 Footer를 포함시키고, children을 props로 전달받아 추가로 포함시켰다.

이제 Header와 Footer를 필요로 하는 페이지에서, Layout에 그 페이지를 props로 넣는다면 간단하게 Header와 Footer를 포함시킬 수 있다.

 

// App.tsx

import React from "react";
import Home from "./pages/Home";
import Layout from "./components/layout/Layout";

function App() {
  return <Layout children={<Home />}></Layout>;
}

export default App;

children에 <Home/>을 전달하여 Layout 적용.

// App.tsx

import React from "react";
import Home from "./pages/Home";
import Layout from "./components/layout/Layout";

function App() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

export default App;

또는 다음과 같은 방법으로도 Layout을 적용할 수 있다.

 

글로벌 스타일

 

각 브라우저는 기본적으로 h1, p, button, input 등의 요소에 자체 스타일을 적용한다.

글로벌 스타일은 이를 표준에 맞게 통합해주어, 다양한 브라우저에서 일관된 스타일을 보장해준다.

적용 가능한 글로벌 스타일 종류에는 reset css, normalize.css, sanitize.css 등이 있다.

 

https://www.npmjs.com/package/sanitize.css

sanitize.css

예시로 sanitize.css를 적용해보자.

다음 명령어를 통해 라이브러리를 설치해준다.

npm install sanitize.css --save

 

 

그리고 리액트 프로젝트의 index.tsx에서 sanitize.css를 import해준다.

import "sanitize.css";

 

 

그리고 프로젝트를 확인해보면, sanitize.css가 적용된 모습을 볼 수 있다.

 

https://www.npmjs.com/package/styled-components

styled-components

 

 

다음으로 styled-components를 활용하여 ts로 css를 입력하고 글로벌 스타일을 적용해보자.

다음 명령어로 styled-components를 설치한다.

npm i styled-components

 

글로벌 스타일로 적용할 파일을 작성해준다.

// global.ts

import "sanitize.css";
import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`
    body{
        padding: 0;
        margin: 0;
    }

    h1{
        margin: 0;
    }
`;

 

index.tsx를 해당 GlobalStyle로 감싸준다.

// index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { GlobalStyle } from "./style/global";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <GlobalStyle>
      <App />
    </GlobalStyle>
  </React.StrictMode>
);