[React] 리액트에서 Styled Components Global Style, Theme 설정하기

 

기존의 전역 스타일링 적용 방식

 

웹 브라우저의 기본 스타일값을 제거하고 통일성있는 CSS 스타일 적용을 위해 reset.css 파일을 생성하고 index.js에 해당 css를 import 하는 방식으로 사용했다.

 

 

하지만 Styled Components라는 CSS-in-JS를 사용하고 있으니 사용 중인 라이브러리를 최대한 활용해서 쓰는 것이 더 효율적일 것이라는 생각이 들었다. 따라서 별도의 css 파일이 아닌 Styled Components에서 제공하는 GlobalStyleds라는 전역 스타일링 방법을 사용했다.

 

 

 

---

Global Style 적용하기

프로젝트를 아우르거나 공통적으로 들어가야 할 스타일을 적용할 때 전역적(Globally)으로 스타일을 지정할 수 있는데, 이때 쓰는 방법이 전역 스타일링이다. GlobalStyles를 생성하면 해당 리액트 프로젝트에 전역적으로 스타일링 지정이 가능하다.

 

 

1. GlobalStyle.js 생성

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
	// 코드 생략
`;

export default GlobalStyle;

 

createGlobalStyle을 import하고 선언해준다. 해당 변수 안에는 reset.css 안에 있던 내용을 옮겨주었다.

 

 

2. GlobalStyle import 하기

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import GlobalStyle from './style/GlobalStyle';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStyle />
    <App />
  </>,
);

reportWebVitals();

 

루트의 index.js에 import 해둔 reset.css를 지우고 GlobalStyle를 import한다.

 

 

3. 전역 스타일링 컴포넌트 설정하기

 

아래에는 다음과 같이 reset하고 싶은 브라우저 기본 css 뿐만 아니라 전역에서 공통적으로 사용할 스타일이 지정된 컴포넌트도 함께 작성할 수 있다. GlobalStyle.js에 선언한 뒤 해당 스타일링을 이용할 파일에서 import 해서 사용하는 방식!

 

 

 

---

Theme 적용하기

 

페이지에 전반적으로 사용할 스타일의 휴먼 에러를 줄이기 위해 기존에는 위와 같이 style.css 파일을 만들어 사용했었다면, Styled Components에서는 ThemeProvider를 이용해 위와 같은 기능을 이용할 수 있다. ThemeProvider는 ContextAPI를 이용해 리액트 컴포넌트에게 Theme 속성을 전달할 수 있으며, 컴포넌트의 depth가 깊어지더라도 루트 위치에 ThemeProvider가 있다면 모든 렌더 트리의 자식에는 theme 속성을 가지게 된다.

 

 

1. Theme.js 생성

 

theme.js 파일을 만들어 전역적으로 사용할 스타일 변수를 선언한다.

 

 

2. Theme Provider import 하기

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import { GlobalStyle, theme } from './style';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <App />
    </ThemeProvider>,
);

reportWebVitals();

 

루트에 위치한 index.js에 위에서 import 해뒀던 GlobalStyle과 App을 감싸도록 설정한다.

 

 

 

위와 같이 ThemeProvider를 이용하면 감싸져있는 파일의 하위 어디서든 별도의 import 과정 없이 theme을 호출해 내부의 css 변수를 사용할 수 있다.

 

 

 

---

[참고 자료]

https://styled-components.com/

styled-components

https://www.daleseo.com/react-styled-components/

Styled Components로 React 컴포넌트 스타일하기

https://wonit.tistory.com/366

[styled-components] ThemeProvider로 공통 스타일 속성 관리하기.