TIL GlobalStyle의 위치

[sgoldenbird]

📌 배운 내용 요약

• GlobalStyle을 사용할 위치
• FOUC (Flash of Unstyled Content)

---

🔍 배경 / 문제 상황

관련 데일리 스크럼

📁 src/
├── 📁 styles/
│   ├── Global.styles.jsx            
│   └── responsive.js   
├── App.js
└── main.js  

• 위의 폴더구조에서 기존에는 GlobalStyle을 main.jsx에서 아래와 같이 사용하고 있었습니다.
• GlobalStyle이 RouterProvider 밖에 있고, 그래서 → App이 마운트되기 전에 스타일이 먼저 적용됩니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import App from './App.jsx';
import router from './routes/router';
import GlobalStyle from './styles/global.styles.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <GlobalStyle />
    <RouterProvider router={router}>
      <App />
    </RouterProvider>
  </StrictMode>,
);

그런데 알아보니 App외부에서 GlobalStyle을 적용할 때 아래와 같은 단점들이 있었습니다.

- 스타일과 UI 트리 간의 연결이 끊어짐 (책임 분리 실패)
GlobalStyle이 App 컴포넌트 트리 외부에 존재하면, 글로벌 스타일도 별도로 다른 레이어에서 관리되는 것처럼 느껴짐.
유지보수 시 App 컴포넌트만 봐서는 스타일이 어떻게 적용되는지 파악 어려움.
즉, 스타일이 어디서부터 시작되는지 한 눈에 안 보이는 문제가 생김.

- ThemeProvider, context 등과의 연동이 어려움
Emotion에서 ThemeProvider를 사용하는 경우, 일반적으로 App.jsx 안쪽에서 로 감싸고, 그 아래에 GlobalStyle을 둠.
그런데 GlobalStyle이 App 바깥에 있으면 ThemeContext 접근이 불가능함.
그래서 다크모드 / 사용자 설정 / 다국어 등에 따라 스타일을 바꾸기 어렵게 됨.

- 테스트 또는 SSR 환경에서 일관성 떨어짐
지금 프로젝트에서는 SSR을 사용하지 않지만 이러한 단점도 있었습니다.
일부 SSR 환경(Next.js 등)이나 테스트 환경에서, 스타일이 렌더링 타이밍과 엇갈리면서 스타일 플리커(flicker) 또는 미적용 문제가 생길 수 있음.
App 내부에 있으면 일관된 렌더링 흐름을 따르기 쉬움.

이러한 내용을 종합해 볼 때 단기적으로는 문제가 없어 보였으나 확장성이나 책임성을 고려할 경우 스타일이 App밖에 있어 관리와 책임위치가 분산되다보니 유지보수 등의 면에서 단점이 많아 보였습니다.

그래서 아래와 같이 App 내부 최상단에 적용하는 것을 제안했습니다.

function App() {
  return (
    <>
      <GlobalStyle /> 
      <main>
        <Outlet />
      </main>
    </>
  );
}

그런데 팀원들과 회의를 해보니 아래와 같은 이유로 현 상태를 유지하자는 의견도 있었습니다.

- 스타일 플리커 방지 (FOUC, Flash of Unstyled Content)
App이 마운트되기 전에 스타일이 미리 적용되어 있어야 흰 화면 → 깜빡 → 스타일 입혀짐 😵 같은 현상을 줄일 수 있음
특히 emotion의 GlobalStyle은 JS 실행 시점에 스타일이 생성되기 때문에, JS 코드 실행 전 CSS가 없으면 순간적으로 스타일 없는 상태가 보일 수 있음. 그래서 스타일은 최대한 최상위에서 빨리 적용하자는 논리가 생김

블로그 및 여러 자료를 찾아보니 실제로 이 두 방식은 때에 따라 혼합되어 다르게 쓰이는 것 같았습니다.

---

✅ 해결 방법 또는 핵심 정리

CSS in JS 방식의 emotion을 사용한다는 것을 고려했을때 GlobalStyle은 App 바깥에 두되, ThemeProvider와 함께 구조화하는 것이 아래와 같은 이유로 좋은 방법 같습니다.

1. 초기 스타일 적용이 빨라서 FOUC 방지

• GlobalStyle이 App 바깥에 있어 가장 먼저 렌더링되므로, 깜빡임 없이 안정적인 초기 화면 출력

2. ThemeProvider를 wrapping해서 확장성 유지

• 다크모드, 사용자 맞춤 테마, 언어별 스타일 변경 시 대응 가능
• App과 GlobalStyle이 같은 테마 컨텍스트 안에 있음

3. 역할 분리가 명확

• main.jsx: 애플리케이션 전체를 감싸는 초기 설정 (Router, Theme, GlobalStyle)
• App.jsx: 페이지 콘텐츠, 컴포넌트 중심 구성

import { ThemeProvider } from '@emotion/react';
import GlobalStyle from './styles/Global.styles.jsx';
import theme from './styles/theme';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyle /> 
      <RouterProvider router={router}>
        <App />
      </RouterProvider>
    </ThemeProvider>
  </StrictMode>
);

🧠 느낀점 및 생각 메모

이번 논의를 통해 GlobalStyle 위치에 따라 스타일 적용 시점이나 확장성에 어떤 차이가 있는지 알 수 있었습니다.
처음엔 App 내부에 넣는 게 구조적으로 더 깔끔해 보였지만, 팀원들과의 논의를 통해 FOUC 이슈나 ThemeProvider와의 연동 같은 부분까지 고려하게 되었고, App 바깥에서 설정하는 방향이 더 적절하다는 결론에 도달했습니다. 단순한 스타일 위치 결정이 아닌, 사용자 경험과 유지보수까지 고려한 판단이라는 점에서 의미 있었고, 앞으로도 구조를 잡을 때 기능성과 확장성을 함께 고민해야겠다고 느꼈습니다.

[yuj2n]

GlobalStyle을 사용해본 적이 없어 위치에 대해서는 생각해본 적이 없었는데

<ThemeProvider theme={theme}>
      <GlobalStyle /> 
      <RouterProvider router={router}>
        <App />
      </RouterProvider>
</ThemeProvider>

시은님 의견대로 위 구조로 작성하면 초기 스타일 적용도 되고 ThemeProvider와 연동도 가능해서 좋을 것 같아요!