최근에 다양하게 웹 개발 형태가 변화하면서 그에 따라 스타일을 적용하는 CSS에도 변화가 생겼다.
기존의 CSS파일형식으로 적용하는 것이 아닌 각각의 컴포넌트(Javascript파일)안에서 적용시키는 분리현상이 발생하였다.
오늘은 이 흐름에 대해서 알아보고 이것을 쉽게 적용하기위한 라이브러리 두 가지를 알아보고자 한다.
어떻게 보면 되게 단순하다. 내가 이것을 써보면서 느낀 것은 상속에 대한 영향이 없다는게 가장 큰 것 같다.(물론 하나의 JS안에서의 상속은 제외).
자바스크립트에서 쓰이는 상수, props, 함수 등을 사용할 수 있다는 것도 큰 장점 중 한 개이다.
또한 컴포넌트로 만들어 재사용할 수 있다는 점이 있다. 이것은 필자가 가장 자주 사용하는 방법인데 만약 공통된 CSS 특성이 있는 div를 사용하고 싶다면 하나의 컴포넌트를 만들어 필요한 곳곳에 재사용이 가능하다.
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
은 최근에 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의 장점은 다음과 같다.
처음 리액트를 접하고 각각의 컴포넌트 파일을 위해 모든 css파일을 만들어야되나라는 생각을 했던 과거의 나
반성해..!
Javascript파일안에 css를 집어넣음으로 개발의 형태가 많이 변화하였고 각각의 기능들을 최대한 작은 것들로 분해해서 적용하는 React방식에선 가장 좋은 기능이라고 할 수 있다.
처음 리액트를 배울 때부터 styled-component를 즐겨쓰다가 최근에 emotion을 쓰기 시작하였는데 className이 자동생성되는 장점이 개발자들과 디자이너에게 있어서는 확실히 큰 것 같다.