react 스타일 적용 방법

css module, Sass / less, styled-component

  • css module: 모듈화된 CSS로 CSS 클래스를 만들면 자동으로 고유한 클래스네임을 생성하여, 스코프를 지역적으로 제한하는 방식
  • Sass: 자주 사용하는 CSS 전처리기 중 하나이며, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하도록 도와준다. css module방식으로 사용가능하다.
  • styled-component: 요즘 인기있는 컴포넌트 스타일링 방식으로, js코드 내부에서 스타일을 적용한다.

1. CSS 모듈 활성화

  • webpack을 통해 컴포넌트에 CSS적용 시킬수 있다.
  • create-react-app에서는 style-loader, css-loader, postcss-loader 세가지 로더를 사용한다.
  • style-loader: 스타일을 불러와 웹페이지에서 활성화 하는 역할을 한다.
  • css-loader: css파일에서 import와 url(…) 문을 webpack의 require기능으로 처리하는 역할을 한다.
  • postcss-loader: 모든 웹 브라우저에서 입력한 css구문이 제대로 작동하도록 -webkit, -mos, -ms등 접두사를 붙여준다.

2. Sass

  • Syntactically awesome style sheets의 약어 ‘문법적으로 매우 멋진 스타일 시트’를 의미한다.
  • CSS에서 사용할수 있는 문법을 확장하여 중복되는 코드를 줄여 더욱 보기 좋게 작성할수 있다.
  • 두가지 패키지 사용: node-sass, sass-loader 설치
  • sass-loader: webpack에서 Sass파일을 읽어온다.
  • node-sass는 Sass로 작성된 코드를 CSS로 변환한다.
  • 변수 사용가능
  • 자주 사용하는 구문은 mixin을 이용해서 다시 사용가능 하다
    @mixin place-at-center() {
        top: 50%;
        left: 50%;
    }

    @include place-at-center();
  • 전역으로 사용하는 스타일을 분리해서 사용하는 것이 좋다 (css module과 같이 사용)
  • open-color(색설정), include-media(반응형) 라이브러리 추가

3. styled-components

  • 자바스크립트 안에 css파일을 선언한다.
import styled from 'styled-components';

const Wrapper = styled.div`
    border: 1px solid black;
    display: inline-block;
    padding: 1rem;
    ...


<Wrapper....
  • 자바스크립트 내부에서 스타일을 정의하기 때문에 자바스크립트와 스타일 사이 벽이 허물어져 동적 스타일링이 더욱 편해진다.
  • 기존의 css파일을 사용한 방법과 다르게 관리 해야하기 때문에 협업시 조금 어려울수 있다.

4. 참조