[React] Global Style 설정

안녕하세요 황대성입니다😊

 

이번 글에서는 styled-components와 styled-reset을 사용하여 Global Style 설정 방법을 알아보겠습니다.

 

사용 방법도 굉장히 쉽고, 한 번 설정해놓으면 효율적인 코드를 작성 할 수 있습니다.

 

여러분들도 한 번 사용해보셨으면 좋겠습니다.

---

제일 먼저 초기 세팅을 해줍시다.

• css 초기화를 위한 styled-reset 설치
• createGlobalStyle을 사용하기 위한 styled-components 설치

npm install styled-reset styled-components

//or

yarn add styled-reset styled-components

---

이제 실제로 사용해봅시다.

 

styled-components는 local로 동작하기 때문에 GlobalStyles.js 파일을 생성해서 Global Style을 관리합니다.

 

src/styles/GlobalStyle.js

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
    ${reset};
    body{
        padding: 0;
        margin: 0;
        font-family: 'Noto Sans KR', sans-serif;
    };
    button{
        display: flex;
        cursor: pointer;
        outline: none;
        border-radius: 3px;
    };
    input{
        display: flex;
        outline: none;
        padding-left: 10px;
    }
`;

export default GlobalStyle;

저는 위 코드를 다음과 같은 효과를 위해 작성했습니다.

• body: margin과 padding을 0으로 주기위해, font 설정을 하기위해
• button: button의 기본설정을 하기 위해서
• input: input의 기본설정을 하기 위해서

정말 사용하기 쉽죠?

 

이렇게 하면 button이나 input마다 작성해야 할 코드도 줄고,

렌더링되는 모든 폰트에 제가 설정한 폰트가 적용되기 때문에 중복되는 코드를 작성하지 않아도 됩니다.

---

이제 GlobayStyle 파일을 사용해봅시다.

 

src/App.js

import React from 'react';
import GlobalStyle from './styles/GlobalStyle';
import styled from 'styled-components';
import { Switch, Route, BrowserRouter } from 'react-router-dom';

import Home from './pages/Home';
import International from './pages/International';
import Multiple from './pages/Multiple';

import Header from './components/Header/Header';

const RootDiv = styled.div`
  height: 100vh;
`;

const App = () => {
  return(
    <React.Fragment>
      <GlobalStyle />
      <RootDiv>
        <BrowserRouter>
          <Header />
          <Switch>
            <Route exact path = "/" component = {Home} />
            <Route exact path = "/inSearch" component = {International} />
            <Route exact path = "/mtSearch" component = {Multiple} />
          </Switch>
        </BrowserRouter>
      </RootDiv>
    </React.Fragment>
  );
}

export default App;

사용 방법도 정말 간단합니다.

 

여러분의 App.js 혹은 index.js 등 라우터를 설정해주는 부분에서 GlobalStyle을 불러와 적용 시켜주시면 됩니다.

---

사용하기 정말 쉬우니까 여러분도 사용해보세요!

 

참고 문헌 및 사이트

 

React Js - Global CSS 설정 + styled reset

styled-reset npm 공식문서

styled-components 공식문서

 

긴 글 읽어주셔서 감사합니다😀