[CSS/Side Lib.] Styled Components

2차 개인 프로젝트에서 디자인을 위해 Sass(SCSS) 외에 다른 라이브러리를 사용하려고 한다. 바로 'Styled-Components'!!

초기 세팅에 앞서, Styled-Components 개념공부, 설치 및 사용법을 간단히 학습하고자 포스팅을 시작했다.🧐🧐

---

📘 CSS-in-JS 란?

Styled-Components 는 스타일을 가진 컴포넌트를 만들도록 도와주는 React의 대표적인 CSS-in-JS 라이브러리이다.

CSS-in-JS 의 개념을 먼저 정리한다면, 스타일 정의를 CSS 파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

 

기존 웹 개발은 HTML - CSS - JS 각각 별도 파일로 분리하는 것이 기본적인 컨셉이었다.

하지만, React, Vue 등 모던 자바스크립트 라이브러리가 인기를 끌고, 웹개발의 패러다임도 계속해서 변화하는 추세이다.

여기의 핵심이, SPA 안에서 여러 재활용 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 방식이 주류가 되고 있다.

 

따라서, 하나의 컴포넌트가 HTML/CSS/JS 모두를 포함하는 형태를 추구하며 기술의 변화가 진행되는 것이다.

React는 컴포넌트 안에서, JSX를 통해 HTML을 포함시키고, 여기에 CSS-in-JS 라이브러리를 통해 CSS까지 포함시키고자 한 것이다.

Styled-Components 역시 이 트랜드 흐름 위에 있는, CSS-in-JS 라이브러리 중 가장 널리 사용되고 있는 라이브러리다.

 

Styled-Components가 적용된 사이트 (출처: styled-components 공식)

---

📘 Styled-Components 사용법

- 설치

npm install styled-components

'styled-components' 패키지명으로 노드 환경에서 설치할 수 있다. 설치 후에, package.json 에서 확인이 가능하다!

  "dependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "styled-components": "^4.3.2"
  },

 

- 사용법

1) 기본 문법

 

기본적으로 패키지에서 styled 함수를 임포트한다. 적용은 HTML element 선택과, React 컴포넌트를 선택에 따라 달라진다.

import styled from "styled-components";
import Button from "./Button";


// 1) HTML 엘리먼트
styled.button`
  // CSS Styling..
`;

// 2) React 컴포넌트
styled(Button)`
  // CSS Styling..
`;

 

styled 함수가 적용된 형태는 아래와 같겠다.

import styled from "styled-components";

styled.button`
  color: red;
`

// CSS 비교
button {
  color: red;
}

 

이렇듯, 컴포넌트나 함수 내에서 동작하기 때문에 Styled-Components는 전역적으로 적용되지 않는다. (컴포넌트 간 격리)

다시 말하면, 각 JS파일마다 고유한 CSS 네임 스페이스가 부여되기 때문에 '인라인 스타일링' 의 일환이라 할 수 있겠다.

 

 

2) 고정 스타일링

 

먼저, styled 함수로 <button> 엘리먼트를 스타일링하겠다. 이후, 이를 StyledButton 변수에 저장한다.

styled 함수는 컴포넌트를 반환하기에, 이처럼 컴포넌트(함수) 내에서 JSX 형태로 적용해서 <Button>이라는 컴포넌트를 제작한다.

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

const StyledButton = styled.button`
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 1rem;
  border: 1px solid gray;
  color: gray;
  backgroud: white;
`

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

export default Button;

 

이렇게 제작된 <Button> 컴포넌트를 다른 React 컴포넌트에서 다음과 같이 사용한다.

import Button from "./Button";

<Button>Default Button</Button>  // children => 'Default Button'

 

* Styled-Components 가 적용된 HTML 요소를 확인해보면, 임의로 지정된 클래스명이 적용되었음을 알 수 있다.

// HTML
<button class="sc-kgAjT beQCgz">Default Button</button>

// CSS
.beQCgz {
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid gray;
  color: gray;
  background: white;
}

 

 

3) 가변 스타일링 1 

 

Styled-Components 는 props에 따라 다른 스타일을 적용하는 기능을 제공한다.

Tagged Template Literals를 사용하기 때문에 JS구문을 포함시킬 수 있다.

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

const StyledButton = styled.button`
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "gray"};
  background: ${(props) => props.background || "white"};
`

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background} Î>
      {children}
    </StyledButton>
  )
}

위 예시처럼, color 와 background 속성에서 props에 따른 설정을 할 수 있다. || 연산자는, props가 없는 경우 default 설정

 

당연히, 이 <Button> 컴포넌트를 사용할 때에는 color, background props 값들을 포함해야 가변 스타일링이 가능할 것이다.

import Button from "./Button";

<Button color="green" background="pink"> 
  Green Button
</Button>

 

 

4) 가변 스타일링 2

 

하나의 props로 다수의 CSS 속성을 변환하고자 하는 경우가 있을 것이다. 이 때, Styled-Components 의 css 함수를 사용한다.

import React from "react"
import styled, { css } from "styled-components"

const StyledButton = styled.button`
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid lightgray;

  ${(props) =>
    props.primary &&
    css`
      color: white;
      background: navy;
      border-color: navy;
    `}
`

function Button({ children, ...props }) {
  return <StyledButton {...props}>{children}</StyledButton>
}

위 예시는, <Button> 컴포넌트에 'primary' 라는 props가 넘어오면 && 연산자를 통해 복수의 추가 스타일링을 부여한다.

여기에는 Styled-Components 에서 제공하는 css 함수를 적용한 것이다. (문법은 styled 함수와 유사한 듯)

import Button from "./Button";

<Button>Normal Button</Button>			// 흰색 버튼
<Button primary>Primary Button</Button>		// 남색 버튼

 

 

5) 스타일 상속

 

Styled-Components 로 제작된 컴포넌트들은 상호간의 상속이 가능해진다.

const Spacer = styled.div`
  margin: 10px;
  padding: 10px;
`

const StyledButton = styled(Spacer)`
  color: blue;
  border-radius: 5px;
`

<StyledButton>버튼에 마진/패딩 적용됨</StyledButton>

 

 

- 심화 문법

1) as : Tag 변경

 

as(props) 를 이용하면 Styled-Components 태그 종류를 변경할 수 있다.

const Box = styled.div``;

<Box as="a">div 요소를 a 요소로 변경</Box>

 

2) Mixin 형태의 중복 최소화

 

중복되는 스타일링을 줄이기 위해, 이처럼 margin 이라는 조건부 함수(css)를 만든 뒤 각각의 컴포넌트 내에서 반영한다.

import styled, { css } from "styled-components";

const margin = css`
  ${({ margin }) => margin && `margin: ${margin};`}
`;

const MixinBox1 = styled.div`
  ${margin}
`;

const MixinBox2 = styled.div`
  ${margin}
`;

<MixinBox1 margin="10px">작은 마진</MixinBox1>
<MixinBox2 margin="30px">큰 마진</MixinBox2>

 

3) createGlobalStyle 함수 : 전역 스타일링

 

전역 스타일링을 위해 Styled-Components 에서 지원하는 함수이다. Reset.css 적용 등에 유용하다.

import { createGlobalStyle } from 'styled-components';

const ResetStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
`;

<ResetStyle />;

* 과거 injectGlobal 이 v4부터 위로 대체된 것이다.

 

4) 내부 컴포넌트의 스타일링

 

Styled-Components 내부의 특정 컴포넌트만 명시하여 스타일을 추가할 수 있다.

const InnerBox = styled.div``;

const OuterBox = styled.div`
  ${InnerBox} {
    color: red;
  }
`;

<OuterBox>
  <InnerBox>붉은색 적용됨</InnerBox>
</OuterBox>

---

😀 결론

오랜만에 블로그 포스팅이었다. Styled-Components 를 프로젝트에서 활용하기 전에 간단히 정리하고 싶었따!! ㅎㅎ

사용법은 단순해 보이나, 아무래도 컴포넌트 스타일을 설계하는 것이기 때문에 상호구성에 대한 고민이 많아질 것 같다.

 

<References>

- Styled Components 공식 사이트 : styled-components.com/

- Dales Seo 님의 블로그 : www.daleseo.com/react-styled-components/

- Junjangsee 님의 블로그 : junjangsee.tistory.com/entry/styled-components%EB%A1%9C-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0