CSS in JS

최경락 (K_ROCK_)·2022년 1월 5일

구조적인 CSS 작성법의 발전

웹의 발전에 따라 CSS를 작성하는 방법에 대해서도 많은 발전이 필요했다.
프로젝트의 규모나 복잡도가 커지면서 CSS를 작성하는 방법에 대한 일관적인 패턴이 없다는 것은 큰 문제였다.
→ 사람마다 다른 클래스명 작명 규칙 등등
또한 많은 디바이스가 웹에 접속 할 수 있게되면서 CSS는 점점 복잡해지게 되었고, CSS를 구조화하는 방법에 대한 발전이 필요해졌다.

SASS

SASS는 CSS 전처리기의 일종으로써, CSS를 구조화된 형식으로 작성 할 수 있게끔 도움을 주는 라이브러리이다.
속성값을 변수로 지정하여 재사용 할 수 있다는 장점이 있다.
하지만, 작성된 내용을 전역 CSS로 만들어주는 컴파일 과정이 필요했고, 이 과정에서 CSS 파일의 용량이 상당히 커지는 단점을 가지고 있었다.
→ 디버깅이 어렵다는 단점도 함께 가지고있었다.

BEM

전처리기의 단점을 보완하기 위해 고안된 방법론.
Block - Element - Modifier 를 줄인 말이며 각각의 뜻은 아래와 같다.
- Block → 요소들을 감싸는 큰 블록
- Element → 블록 내부에 있는 요소
- Modifier → 직접적으로 변경되는 요소

<section class="header"> <!-- Block -->
  <div class="header__banner"> <!-- Element -->
    <h1 class="header__banner--title">페이지 제목</h1> <!-- Modifier -->
  </div>
</section>

전처리 과정이 불필요하고, 클래스의 재사용이 가능하다는 장점을 가진다.
그러나, 클래스의 이름이 너무 길어지고, 이로 인해 마크업이 복잡해지는 문제와 재사용을 위해서는 명시적으로 모든 클래스명을 작성해야 한다는 단점이 있었다.

CSS in JS

CSS in JS 는 스타일의 작성을 CSS 파일이 아닌, JS로 작성된 컴포넌트에 바로 삽입하는 방법론을 뜻 한다.
최근, 컴포넌트 단위의 개발(CDD)이 주류가 되면서 마크업과 기능을 한데 묶어 작성하는데, 여기에 Styled-Component 라이브러리를 이용하면, 그 뿐아니라 스타일까지 컴포넌트에 한번에 작성 할 수 있다.
→ 기존 : JSX(HTML + JS) + CSS
→ Styled-Component : JSX(HTML + JS + CSS)

Styled-Component

대표적인 CSS in JS 라이브러리 중 하나이며, 컴포넌트 단위로 CSS 를 적용하는 라이브러리이다.
해당 라이브러리를 사용함으로써, 컴포넌트에 따로 CSS 파일을 연결해주지 않더라도 스타일속성을 지닌 컴포넌트를 만들 수 있다.

설치하기

라이브러리의 설치는 아래의 명령어를 터미널에 작성하여 할 수 있다.

npm i styled-components

라이브러리가 설치되었다면, 사용하고자 하는 문서의 상단에 라이브러리의 styled 함수를 import 하여 사용한다.

import styled from "styled-components";

컴포넌트 만들기

컴포넌트의 생성은 styled 함수를 이용하며, 이때 Tagged Template Literal 문법을 사용한다.
→ 백 틱(``) 내부의 CSS 내용들이 적용된다.

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

const StyledButton = styled.button`
  witdh : 100px;
  height : 50px;
  font-weight : bold;
`;
// 백틱 내부의 CSS 속성이 적용된다.

const Button = ({children}) => {
return (
    <StyledButton> {children} </StyledButton>
  )
}
// CSS가 적용된 컴포넌트를 만들고 CSS가 적용된 컴포넌트를 활용하여 다시 컴포넌트를 만드는 것.

이렇게 작성된 컴포넌트는 다른 컴포넌트에서 아래와 같이 불려와 사용될 수 있다.

import Button from "./Button";
<Button>Default Button</Button>;
// 내부의 내용이 prop.children 으로 전달된다.

가변적으로 스타일 변경하기

스타일 속성을 지닌 컴포넌트를 정의 할 때 함수를 전달하고, 해당 함수 내부에서 props 를 전달 받아 사용 할 수 있다.

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

const StyledButton = styled.button`
  witdh : 100px;
  height : 50px;
  font-weight : bold;

  color: ${(props) => props.color || "gray"};
  background: ${(props) => props.background || "white"};
`;
  // 삼항연산자가 props를 전달받아 사용한다.(함수)
  // props에 해당 하는 속성이 없는 경우 삼항연산자의 false 위치에 있는 속성값을 사용한다.
  // -> Passed Props

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background}>
    {// 렌더링 단계에서 받은 props를 다시 StyledButton 에 전달해준다.}
      {children}
    </StyledButton>
  );
}

import Button from "./Button";
<Button color="white" background="red">
{// props 전달}
  Color Changed Btn
</Button>;

일부 컴포넌트만 바꾸기

같은 스타일 속성을 지닌 여러개의 컴포넌트 중 몇 개만 변화를 주고자 할때, 상속받고자 하는 컴포넌트를 styled() 로 감싼 뒤, 변경하고자 하는 속성을 정의하면 기존 속성을 확장하여 사용 할 수 있다.

const Modified = styled(StyledButton)`
  font-size : 2rem;
`

이렇게 작성하는 경우 기존의 스타일 속성을 유지하되, 원하는 속성만 추가하거나 수정된 새로운 컴포넌트를 만들 수 있다.

Styled-Component 의 특징

Automatic critical CSS
- 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다.
No class name bugs
- 스스로 중복되지 않는 className 을 생성하며, 이는 className 의 중복이나 오타로 인한 버그를 줄인다.
Easier deletion of CSS
- 사용되지 않는 컴포넌트를 삭제하는 경우 CSS 파일 내부에서 일일히 className 찾아 삭제했지만, Styled Component는 스타일 속성이 컴포넌트와 연결되어 있으므로 해당 컴포넌트를 삭제하는 경우 스타일 속성도 함께 삭제된다.
Simple dynamic styling
- className을 일일이 수동으로 관리할 필요 없이 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여한다.
Painless maintenance
- 컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 유지보수가 어렵지 않다.
Automatic vendor prefixing
- 개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면된다. 이외의 것들은 Styled Component 가 알아서 처리한다.