React GlobalStyles.js

Components/App.js

import Router from "Components/Router";
import React from "react";
import GlobalStyles from "./GlobalStyles";

class App extends React.Component {
  render() {
    return (
      <>
        <GlobalStyles />
        <Router />
      </>
    );
  }
}

export default App;

 

styled-components

설치

  $ npm i styled-components

개요

  CSS 효과를 입히려면 html에 class를 추가해야 한다. 이 때 생기는 문제점은 html의 역할에 맞게 class를 naming 하는 것과 다른 영역과 css가 충돌하지 않도록 이름을 설정하는 것이다. 또한 개발자는 해당 html의 css 이름을 기억해야 하는 문제점이 있다.

  이를 해결해주는 것이 styled-component다. styled-component는 개발자가 class name을 기억할 필요도 다른 영역과 이름이 겹치는 것도 신경 쓸 필요가 없다.

  위 사진은 Poster.js라는 component의 styled-component다. html은 div이고 ``(백틱) 안에 css를 추가했다.

  위 사진은 Image styled-component의 class 모습이다. 내가 정한 class가 아니라 styled-components가 만들어준 class다. 이처럼 styled-components는 개발자가 신경 쓸 필요 없이 class를 만들어준다.

createGlobalStyle

  전역 스타일을 처리하는 특수 StyledComponent를 생성하는 도우미 기능이다. 일반적으로 'styled components'는 local CSS 클래스에 자동으로 범위가 지정되므로 다른 구성요소와 격리된다. createGlobalStyle의 경우 이 제한이 제거되고 CSS reset이나 base stylesheets와 같은 것을 적용할 수 있다.

styled-reset

설치

  $ npm i styled-reset

개요

  CSS reset이다. createGlobalStyle과 같이 쓸 수 있다.

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

const GlobalStyles = createGlobalStyle`
    ${reset};
    a{
        text-decoration:none;
        color:inherit;
    }
    *{
        box-sizing:border-box;
    }
    body{
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:12px;
        background-color:rgba(20, 20, 20, 1);
        color:white;
        padding-top:50px;
    }
`;

export default GlobalStyles;

참고 자료

• 노마드 코더의 React 멤버쉽 강의
• styled-components
• styled-reset

소스 코드

github.com/zpskek/Nomflix-v2/commit/a7f364963396cd1e99579db65a8a737245bd377b