TIL.12 | Styled-Component

CSS-in-JS

Styled-Component를 이해하기 전에 먼저 CSS-in-JS에 대한 이해와 지식이 필요하다.

CSS-in-JS는 태그에 대한 스타일 정의를 css파일이 아니라 javascript로 작성된 컴포넌트에 바로 적용하는 기법이다.

react, vue, angular와 같은 자바스크립트 라이브러리가 등장하기 전에는 html, javascript, css 파일을 각각 따로 만들어서 각자 별도로 관리했었다.

하지만 최근에는 코드의 재사용성이 중요하게 여겨지다보니 웹 어플리케이션을 여러 개의 컴포넌트로 나누어서 개발하는 컴포넌트 기반 개발 방법이 주로 사용되고 있다.

따라서 웹 페이지를 html, javascript, css를 각각의 파일로 나누어서 관리하는 것이 아니라 여러 컴포넌트로 분리하고 각 컴포넌트 안에 html, javascript, css를 모두 작성하는 방식이 주로 사용된다. react의 경우에는 jsx를 사용해서 이미 html을 javascript안에 포함시키는 방식으로 작성이 되었고, 추가적으로 CSS-in-JS까지 적용하여 javascript 하나로 html과 css까지 관리하는 모습을 보이고 있다.

설치

Styled-Component를 지원하는 라이브러리에는 많은 종류가 있겠지만, 대표적으로 Styled Components와 Emotion이 대표적으로 사용된다. 이 글에서는 Emotion을 사용하는 방법에 대해서 설명하려고 한다.

우선 해당 라이브러리를 설치한다.

yarn add @emotion/react @emotion/styled

문법

기본 문법

사용 방법으로는 설치한 라이브러리에서 styled를 import하여 새로운 태그를 만들어내는데 사용한다. javascript 안에서 css를 사용해야하기 때문에 Tagged Template Literals 문법에 따라 백틱(``)을 활용해서 코드를 작성한다.

import styled from "@emotion/styled";

const Button = styled.button`
  // css 속성 작성
`;

위와 같이 작성하면 Button이라는 이름의 새로운 태그를 생성할 수 있다. 만들어진 태그는 jsx문법에 따라서 사용 가능하며 동일 파일이 아닌 다른 파일이라면 선언할 때 export를 추가하여 다른 파일에서도 태그를 사용할 수 있도록 한다.

고정 스타일

스타일을 고정적으로 값을 지정한다. 흔히 css 속성을 정의하기 위해서 사용되는 내용들을 모두 작성하는 것이 가능하다.

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

const StyledButton = styled.button`
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1.5;
  border: 0px solid;
  color: white;
  background: blue;
`;

export default function Button({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

가변 스타일

Tagged Template Literals에 따라서 css를 작성하기 때문에 그 안에 prop으로 변수를 보내면 해당 변수를 통해서 값을 원하는대로 변경하는 것이 가능하다.

주로 slide, fade 등의 애니메이션, 버튼의 사이즈 등은 지정되어있지만 페이지마다 다른 색상을 적용하고 싶을 때 내려주는 prop을 다르게 적용하거나 내리지 않아서 default로 지정된 값, 혹은 원하는 색상 등을 적용하는 방식으로 스타일을 원하는 대로 변경할 수 있다.

// prop으로 내려온 y값에 따른 애니메이션
// 해당 코드는 next.js 방식으로 작성
import { css, keyframes } from "@emotion/react";
import styled from "@emotion/styled";

const slide = keyframes`
  from{
    left: -100px;
    opacity: 0;
  }
  to {
    left: 350px;
    opacity: 1;
  }
`;

const backSlide = keyframes`
  from{
    left: 350px;
    opacity: 1;
  }
  to {
    left: -100px;
    opacity: 0;
  }
`;

const Text = styled.h1`
  font-size: 6em;
  width: 258px;
  font-family: sans-serif;
  position: absolute;
  top: 200px;
  left: -100px;
  opacity: 0;

  ${(props: { y: number }) =>
    props.y > 10
      ? css`
          animation: ${slide} 2s ease-out forwards;
        `
      : css`
          animation: ${backSlide} 2s ease-out forwards;
        `};
`;

export default function Home() {
  const [y, setY] = useState(0);

  useEffect(() => {
    window.addEventListener("scroll", function () {
      const value = window.scrollY;
      setY(value);
    });
  });

  return (
    <div>
      <Text y={y}>Animation</Text>
    </div>
  );
}

코드 작성에서 주의할 점은 변경할 내용에 대해서 적용할 변수를 가진 prop을 내려줘야한다. 또 백틱 안에서 ${}를 통해서 prop으로 받은 변수를 가지고 css 속성을 정의해야하기 때문에 일반적인 방법과는 다르게 Emotion에서 제공하는 css 함수를 통해서 속성을 정의해야한다. css 함수에 사용되는 백틱 안에서는 다중으로 속성을 정의하는 것도 가능하므로 animation에 추가적으로 색상이나 크기를 변경하는 것도 가능하다.