#13 styled-components

CSS in JS?

CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.

기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌었습니다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹 개발의 패러다임이 바뀌고 있습니다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있습니다.

 

따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 몽땅 때려 박는 패턴이 많이 사용되고 있습니다. React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있습니다.

 

Styled Components는 이렇게 트랜드가 되고 있는 CSS-in-JS 라이브러리 중에서도 단연 가장 널리 사용되고 있는 라이브러리입니다.

 

 

공식홈피 : https://styled-components.com/

styled-components

npm install styled-components

 

모듈설치 확인 (package.json => dependencies 영역에 추가됨)

 

기본 사용법

Button.js : 별도파일에 아래와 같이 button 스타일을 작성하고 export 하도록 작성

import styled from "styled-components";

const StyledButton = styled.button`
  padding: 6px 12px;
  border: 1px solid lightgrey;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
`;

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

export default Button;

 

App.js : Button.js파일을 import 하고 <Button> 테그를 이용하여 스타일을 적용

import React from 'react';
import Button from './Button';

export default function App() {
  return (
    <>
      <Button>Button</Button>
    </> 
  )
}

 

내부 스타일시트를 확인해보면 클래스 선택자(class selector)로 적용된 스타일이 위에서 Styled Components로

삽입한 스타일이 자동으로 등록됨을  확인 할 수 있음.

 

가변 스타일링

props를 이용하여 다양한 상태의 스타일 적용이 가능함. 

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

const StyledButton = styled.button`
  padding: 6px 12px;
  border: 1px solid lightgrey;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;

  color: ${p => p.color || 'grey' };
  background-color: ${p => p.background || 'white'};

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

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

export default Button;

 

위에 작성한 styled 를 이용하여 버튼 스타일 적용

import React from 'react';
import Button from './Button';
import './App.css';

export default function App() {
  return (
    <>
      <Button>default Button</Button>
      <Button color="green" background="pink">Geen Button</Button>
      <Button primary>Primary Button</Button>
    </> 
  )
}