CSS In JS

강종연·2021년 5월 28일
0

FrontEnd

목록 보기
4/6
post-thumbnail

최근에 다양하게 웹 개발 형태가 변화하면서 그에 따라 스타일을 적용하는 CSS에도 변화가 생겼다.
기존의 CSS파일형식으로 적용하는 것이 아닌 각각의 컴포넌트(Javascript파일)안에서 적용시키는 분리현상이 발생하였다.
오늘은 이 흐름에 대해서 알아보고 이것을 쉽게 적용하기위한 라이브러리 두 가지를 알아보고자 한다.

Why?

어떻게 보면 되게 단순하다. 내가 이것을 써보면서 느낀 것은 상속에 대한 영향이 없다는게 가장 큰 것 같다.(물론 하나의 JS안에서의 상속은 제외).

자바스크립트에서 쓰이는 상수, props, 함수 등을 사용할 수 있다는 것도 큰 장점 중 한 개이다.

또한 컴포넌트로 만들어 재사용할 수 있다는 점이 있다. 이것은 필자가 가장 자주 사용하는 방법인데 만약 공통된 CSS 특성이 있는 div를 사용하고 싶다면 하나의 컴포넌트를 만들어 필요한 곳곳에 재사용이 가능하다.

styled-component


styled-component는 CSS in JS 관련 라이브러리 중 인기 있는 라이브러리이다.

$ yarn add styled-component

styled-component는 위의 설치 명령어를 실행한 후 사용할 수 있다.

기본 코드 방식은 아래와 같다.

import React from "react";
import styled from "styled-component";

const Circle = styled.div`
    width: 2rem;
    height: 2rem;
    background: blue;
    border-radius: 50%;
`;

function App() {
    return <Circle />;
}

export default App;

굉장히 쉽고 간단하지 않은가. 다른 방법들은 styled-component의 공식문서를 참고하길 바란다.

Emotion


Emotion은 최근에 styled-component의 대안으로 떠오르고 있는 라이브러리이다. emotion.js는 주로 프레임워크를 사용하지 않을 때 쓰는 방법과 React를 쓸 때 방법 두 가지 방식으로 사용된다.

// Not Framework
$ yarn add @emotion/css

// React
$ yarn add @emotion/react

emotion는 두 방식에 따라 각각의 설치 명령어를 실행한 후 사용할 수 있다.

만약 위의 styled 방식을 쓰고 싶다면@emotion/react안에 있는 @emotion/styled로 부터 styled를 import해서 사용이 가능하다. 또한 더 알고싶으면 emotion의 공식문서를 보길 바란다.

그럼 어떤 것을 쓸까?

그러면 둘 중에 어느 것을 쓸까.


(출처: npm trends)

보면 어느새 점유율은 emotion이 앞서있다. 그만큼 최근에 가장 많이 쓰이고 있고 유망있는 라이브러리라고 할 수 있다.

styled-component와 비교한 emotion의 장점은 다음과 같다.

  • 우선 파일 크기가 emotion이 작다.
  • className이 hash방식이 적용되어 자동으로 부여되므로 css가 겹치는 이슈와 디자인, 개발자 간의 커뮤니케이션의 문제도 해결이 되었다.
  • composition기능을 이용해 스타일들을 매우 쉽게 합칠 수 있다.

글을 마무리 하며

처음 리액트를 접하고 각각의 컴포넌트 파일을 위해 모든 css파일을 만들어야되나라는 생각을 했던 과거의 나

반성해..!

Javascript파일안에 css를 집어넣음으로 개발의 형태가 많이 변화하였고 각각의 기능들을 최대한 작은 것들로 분해해서 적용하는 React방식에선 가장 좋은 기능이라고 할 수 있다.

처음 리액트를 배울 때부터 styled-component를 즐겨쓰다가 최근에 emotion을 쓰기 시작하였는데 className이 자동생성되는 장점이 개발자들과 디자이너에게 있어서는 확실히 큰 것 같다.

profile
TypeScript, Next.js를 좋아하는 프론트엔드 개발자입니다:)

0개의 댓글