React x Style <Global Style과 Routing의 조합> : 프로젝트 구조의 최적의 사용법

React 프로젝트에서 글로벌 스타일링을 적용하면서 **라우팅(Routing)**을 사용하는 방법은 매우 중요합니다. 이 두 가지를 효과적으로 결합하면 프로젝트의 유지보수성과 일관성을 높일 수 있습니다. 이번 글에서는 Emotion의 글로벌 스타일링과 React Router를 조합하는 방법을 다루어 보겠습니다.

 

이 방식은 실제로 제가 저희 개발 팀 NOVA에서 진행하고 있는 프로젝트 :  명지대학교 검색 커뮤니티 (MJS)의 프론트엔드 개발자를 맡게되며, 짜고 있는 코드의 폴더 구조와 방식입니다.

 

많은 스타일링 방식을 써보았지만 리액트의 라우팅 구조를 활용하고 있다면 스타일 또한 라우팅을 활용하면 어떨까 ? 하는 궁금증에 공부했던 내용입니다.

 

 

1. 글로벌 스타일링 적용 시 기본 구조

 

전역 스타일링은 앱 전체에 스타일을 적용하여 브라우저 기본 스타일을 제거하고 공통 스타일을 정의하는 데 사용합니다. 보통 App.js에서 전역 스타일을 적용하지만, 라우터 구조와 조합할 때는 다음과 같은 프로젝트 구조를 추천합니다.

 

프로젝트 구조 예시

 

 

2. 코드 예제

 

index.js

 

BrowserRouter로 앱 전체를 감쌉니다.

 

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

 

 

App.js

 

전역 스타일과 라우팅을 함께 적용하는 코드입니다.

/** @jsxImportSource @emotion/react */
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { Global, css } from '@emotion/react';
import Layout from './components/Layout';
import BoardPage from './pages/BoardPage';
import MainPage from './pages/MainPage';
import LoginPage from './pages/LoginPage';
import NotFoundPage from './pages/NotFoundPage';

// 글로벌 스타일 정의
const globalStyle = css`
  body, html, #root {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Poppins', 'Arial', sans-serif;
    background-color: #f5f7fa;
  }
`;

const App = () => {
  return (
    <>
      <Global styles={globalStyle} /> {/* 전역 스타일 적용 */}
      <Routes>
        {/* Layout 적용 페이지 */}
        <Route element={<Layout />}>
          <Route path="/main" element={<MainPage />} />
          <Route path="/board" element={<BoardPage />} />
        </Route>
        {/* Layout 미적용 페이지 */}
        <Route path="/login" element={<LoginPage />} />
        <Route path="*" element={<NotFoundPage />} /> {/* 404 페이지 */}
      </Routes>
    </>
  );
};

export default App;

 

Layout.jsx

 

Outlet을 통해 공통 레이아웃으로 감싸진 페이지를 렌더링합니다.

import React from 'react';
import { Outlet } from 'react-router-dom';

const Layout = () => {
  return (
    <div>
      <header style={{ padding: '1rem', backgroundColor: '#001f5c', color: 'white' }}>
        공통 헤더
      </header>
      <main style={{ padding: '2rem' }}>
        <Outlet /> {/* 중첩된 라우트가 렌더링될 부분 */}
      </main>
      <footer style={{ padding: '1rem', backgroundColor: '#001f5c', color: 'white' }}>
        공통 푸터
      </footer>
    </div>
  );
};

export default Layout;

 

 

MainPage.jsx

/** @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';

const mainPageStyle = css`
  text-align: center;
  padding: 2rem;

  h1 {
    font-size: 2.5rem;
    color: #001f5c;
  }

  p {
    font-size: 1.2rem;
  }
`;

const MainPage = () => {
  return (
    <div css={mainPageStyle}>
      <h1>메인 페이지</h1>
      <p>환영합니다! 로그인 후 이용할 수 있는 게시판 페이지가 준비되어 있습니다.</p>
    </div>
  );
};

export default MainPage;

 

 

 

3. 장점

 

1) 전역 스타일 관리

 

Global 스타일을 App.js에 한 번만 적용하면 모든 페이지에 전역 스타일이 적용됩니다.

 

2) 컴포넌트 기반 레이아웃 관리

 

Layout 컴포넌트로 Header, Footer를 한 번에 적용해 모든 페이지에 일관된 레이아웃을 유지할 수 있습니다.

 

3) 전역 스타일과 컴포넌트 스타일의 분리

 

Global 스타일로 초기화 설정을 하고, 각 페이지는 css 또는 styled를 사용해 컴포넌트별 스타일을 유지할 수 있습니다.

 

 

4. 다른 스타일링 방식과의 비교

기준 : 코드 가독성 , 스타일 유지보수, 동적 스타일링, 공통 스타일링

 

결론

 

Emotion의 글로벌 스타일링과 라우팅을 조합하면 전역 스타일을 한 번 설정하여 모든 페이지에 적용할 수 있습니다. 특히 Layout을 사용하면 중복되는 UI 요소를 줄이고, css 함수를 사용해 페이지별로 고유한 스타일을 쉽게 적용할 수 있습니다.

 

Emotion은 컴포넌트 기반 라이브러리에 적합하며, 동적 스타일링이 필요하거나 컴포넌트 단위로 스타일을 관리하고자 할 때 유리합니다. 반면, Tailwind CSS는 빠른 프로토타이핑과 일관성 있는 스타일을 적용할 때 좋고, CSS-in-CSS는 간단한 프로젝트에 유용합니다.