[React] styled components 사용하기

SASS를 배우고부터는 내가 지금까지 이용해오던 CSS가 얼마나 불편했는지.. 알게 되어서 너무나 신세계였던.. 기억이 있다..!

그런데 지금! SASS를 뛰어넘어 클래스 네임까지 지정해줄 필요가 없는 아니 그것보다는 정확하게 클래스 네임이 중복되는 불편함이 사라지는 styled components 를 알아보려고 한다!

 

 

---

CSS in JS

먼저 CSS in JS라는 개념을 먼저 알고 가면 많은 도움이 될 것 같다.

출처: https://css-tricks.com/a-thorough-analysis-of-css-in-js

기존 프로젝트는 프로젝트의 크기가 커질수록 모든 HTML 요소에 클래스 네이밍을 해줘야 하고, 컴포넌트 스타일을 변경할 때 클래스에 맞는 선택자를 일일이 찾아 변경해야 하는 번거로움이 있다. 또한 JS파일과 분리되어 있어 컴포넌트의 상태 값 변화를 공유하기가 어려웠다.

이러한 CSS의 불편함을 해결하기 위해 CSS-in-CSS / CSS-in-JS 방식을 사용한다. CSS in JS는 말그대로 JS안에 CSS를 추가하는 것을 의미한다.

CSS-in-JS의 특징

• CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다. (모듈성)
• CSS-in-JS는 JavaSript 환경을 최대한 활용할 수 있다
• JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다.
• 현재 사용중인 스타일만 DOM에 포함한다.
• CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다.

우리는 해당 기술을 사용하는 라이브러리인 styled-components를 다루는 것이다.

styled-components는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리이다.

 

---

styled-components 사용하기

먼저 리액트 프로젝트를 생성해주고 터미널 창에 yarn add styled-components를 입력해 설치합니다.

다음 App.js의 상단에 import styled from 'styled-components'; 라고 다음과 같이 입력해 준다.

 

import React from 'react';
import styled from 'styled-components';

function App() {
  return (
    <div>
      <p>안녕하세요</p>
    </div>
    )
}

 

컴포넌트를 생성하는 방법은 스타일링하고 싶은 태그를 지정하고 다음과 같이 만들어 준다.

import './style/App.scss';
import styled from 'styled-components';

function App() {
  return (
    <Circle>
      <p>안녕하세요</p>
    </Circle>
    )
}

const Circle = styled.div`
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: black;
`

 

이런 식으로 Circle이라는 변수를 생성해 div 태그를 스타일을 해주고

div 태그를 내가 만든 Circle태그로 바꿔준다!

 

결과 화면

만약 기존의 CSS 적용 방식을 사용했다면 따로 CSS파일을 생성하고 클래스명을 지정해줘야 하는 번거로움이 있었을 테지만.

이제는 사요나라.. styled-components 최고😭❤️