티스토리 뷰

Frontend/react.js

[React | CSS] #root 과 :root의 차이점 (전역 CSS)

blueprint-12 2023. 4. 19. 23:59

리액트 프로젝트를 하다보면 index.css 와 App.css가 따로 존재하는 것을 볼 수 있습니다. 

vite + react 프로젝트를 만들면서 전역 css를 어디에 배치해야할까 하다가 기존 템플릿에서 제공하는 root가 다른 것을 확인할 수 있었습니다. 

  • src>index.css 에는 :root 
  • src>App.css 에는 #root 
둘 다 전역 CSS같은데 왜 같은 root를 다르게 표현할까 라는 생각이 들었습니다. 

저는 리액트가 같은 :root 를 컴포넌트에 쓸 때는 다르게 표현한 것은 아닐까 라고 생각하고(모듈을 번들링할 때, 다르게 트랜스파일되는 줄..) App.css에 있는 #root를 전역 css로 생각하고 있었는데요. 당연히 틀렸습니다. 자주 보지 않으니 가장 근본적인 App.jsx가 어느 dom요소를 가져와 렌더하는 지에 대한 사실을 까먹고 있었습니다.

 

src> index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

src> main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
  • 위의 코드만 봐도 #root가 어디서 나온 아이인지 알 수 있습니다. 보면 index.html에는 아이디가 root인 div태그를 가지고 있고 main.jsx에서 리액트를 사용하여 index.html의 아이디가 root인 div태그를 가져와 App으로 렌더해주는 것을 알 수 있죠. 

 CSS가 전역으로 설정된 것처럼 보이는 것은 단지 해당 CSS가 상속이 되는 CSS였기 때문이었고 최상위 컴포넌트가 App이였으며 그 하위에 다른 컴포넌트들이 위치해있기 때문이었습니다.

 

결론적으로 #root와 :root는 서로 다른 CSS 선택자입니다.

전역 스타일링을 원한다면 index.css에 있는 :root에 하는 것이 의도에 부합한다고 생각합니다. 

#root 

  • #root는 React 어플리케이션의 최상위 레벨 요소를 나타냅니다. 
  • DOM에 렌더링 될 때 자동으로 생성
  • #root 선택자를 사용하여 최상위 레벨 요소에 스타일을 적용할 수 있습니다. 리액트 프로젝트의 경우, App.jsx 

:root 

  • :root 는 문서 트리의 루트 요소를 나타내는 CSS선택자입니다.
  • 이 선택자는 전통적으로 HTML 문서의 <html> 요소를 나타내는 데 사용됩니다. 
  • CSS 변수를 정의하거나 전역 스타일을 적용합니다. (크로스 브라우징 관련 CSS라든가?)

 App.css에 #root 선택자를 스타일을 적용하면 id가 root div요소(App컴포넌트)에만 스타일이 적용됩니다.

위에서 말한 div 요소가 React 어플리케이션의 최상위 레벨 요소이므로, App 컴포넌트와 그 하위 컴포넌트에만 영향을 미치게 됩니다. 다른 React 컴포넌트에서 #root 선택자를 사용하더라도, id가 root인 요소가 하나뿐이므로 해당 스타일은 여전히 해당 요소에만 적용됩니다.

 

App.css를 전역 스타일링을 할 수는 있습니다. 모든 컴포넌트를 App의 하위에 위치시키면 되긴하지만 이런 구조가 단점을 가지게 됩니다. 모든 컴포넌트가 App의 하위 컴포넌트로 있어야 하므로 구조적으로 컴포넌트 계층 구조를 잘 설계해야하며 전역 CSS를 사용하면 스타일 순위가 높아지므로 컴포넌트마다 개별적인 스타일을 적용하기 어려울 수 있습니다.

App.css 파일의 #root 선택자는 index.html 파일에서 정의된 div요소에 스타일을 적용하는 것입니다.

 

저작자표시

'Frontend > react.js' 카테고리의 다른 글

[RTK Query | Redux] RTK Query란? (redux, redux-toolkit 비교)  (0) 2023.05.11
[React | vite] 번들 사이즈 비주얼라이저(애널라이저)  (0) 2023.04.20
[React] 리액트에서 이벤트 핸들링하기, 디자인 시스템 with.아토믹 디자인 패턴  (0) 2023.04.05
[React | 다국어 지원] i18n이란? react-i18next(리액트 다국어 지원 라이브러리)  (0) 2023.03.22
[React | Vite] CRA 대신 Vite(비트)?  (0) 2023.03.02
댓글