[Nogwari] React GlobalStyle

리액트에서 CSS 스타일을 주는 방법으로 Styled-component 를 주로 사용한다. 노과리 프로젝트에서도 마찬가지이다.
styled-components 의 createGlobalStyle 을 페이지에 적용하는
방법을 알아보자.

ResetStyle.ts

import { css } from "styled-components";
export const ResetStyle = css`
  a {
    color: inherit;
    text-decoration: none;
  }

  a:focus {
    outline: 0;
  }

  a:active,
  a:hover {
    outline: 0;
  }
`

style 경로를 만들고 초기 설정할 디자인(reset.css)을 만든다. 여기서 정해준 CSS 요소는 전체 페이지에 들어갈 요소이다.

globalStyle.ts

import { createGlobalStyle } from "styled-components";
import { ResetStyle } from "./reset";

export const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
${ResetStyle};
html {
  height: 100%;
}

`

같은 경로에 globalStyle.ts 파일을 만들고 createGlobalStyle 을 가져온다. 이 녀석은 어플리케이션 레벨 스타일링을 하는 녀석이다. 우리가 컴포넌트 안에서 styled-component 로 만든 녀석들처럼 개별적으로 동작하는 게 아닌, 최상위 컴포넌트에서 이 녀석을 정의해두면 모든 컴포넌트에 해당 스타일이 적용된다. 여기에 우리가 reset 에 만든 ResetStyle 을 지정해준다.

App.js

import { GlobalStyle } from "./styles/globalStyles.ts";

function App() {
    return (
      <BrowserRouter>
      	<GlobalStyle />
      	<header>
      		<p>
   		   		노과리 프로젝트
	      	</p>
   	   	</header>
      </BrowserRouter>

페이지의 최상단인 App 에서 위에서 만든 GlobalStyle 을 넣어주면, App 에서 라우터를 타는 모든 컴포넌트에 전역 디자인을 넣을 수 있게 된다

▶ 마치며

사실 테마까지 넣어서 다크 모드, 라이트 모드도 만들어서 블로그를 쓰고 싶었는데, 막혀서 나누어서 글을 쓴다.
그저 그런 개발자와 뛰어난 개발자가 나누어지는 조건은, 이런 식으로 찡찡거리지 않는 게 아닐까? 잉웅앵웅