Main.tsx

종류

코드

작성자

ThemeProvider 와 BrowserRouter , GlobalStyle 을 전역적으로 관리한다.


ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider theme={colors}>
      <BrowserRouter>
        <GlobalStyle />
        <App />
      </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>
);

ThemeProvider

styled component 에서 전역적으로 사용할 수 있는 값을 넘겨준다.


<ThemeProvider theme={theme}>
</ThemeProvider>

BrowserRouter

React-Router-Dom 의 기능을 위해 전역적으로 감싸준다.

GlobalStyle

전역적인 CSS 스타일을 주기위해 emotion styled 의 GlobalStyle을 적용한다. 아래와 같이 사용하면 App 컴포넌트의 하위요소에 CSS 가 적용된다.


import { Global, css } from '@emotion/react';

const style = css``;


<GlobalStyle style={style}/>
<App />