React 10. Styled Components

Styled Components

컴포넌트 자체 뿐 아니라 컴포넌트의 스타일마저 JS파일에서 정의하는 방식을 CSS-in-JS 라고 하며, styled components는 해당 방식 중 가장 널리 사용되는 라이브러리입니다.

 

Why?

SASS는 CSS의 많은 부분을 해결했지만, 아직 해결되지 않는 문제점 또한 존재했습니다.

• 서비스가 커질수록 scss 파일의 수도 많아지며, scss 클래스명도 많아집니다. 이는 서비스의 구조를 복잡하게 만듭니다.
• 유지보수 (해당하는 css 태그를 찾아 수정하는 것)가 어려울 수 있습니다.
• Inline style (HTML 요소에 바로 스타일을 정의하는 것) 방식은 html 파일의 부피가 과도하게 증가하고 CSS 파일과의 역할 분리가 모호해지는 문제가 있습니다. 또한 :hover, :after, 미디어 쿼리와 키프레임은 정의할 수 없습니다.

 

Styled Components

styled-components.com/

styled-components

 

설치

npm install --save styled-components

 

 

적용

// import 해줍니다.
import styled from 'styled-components'

render (
	<Container>
    	<Title>
        	Hello World!
        </Title>
    </Container>
);

// html 태그 뒤에 템플릿 리터럴 문법을 활용해 스타일을 정의해 줍니다.
const Container = styled.section`
	padding: 12px;
    background: red;
`

const Title = styled.h1`
	color: blue;
`

 

자주 사용되는 방법들

 

1. props

Styled-components 컴포넌트에 props를 전달해서 전달한 props를 바탕으로 스타일을 정의할 수 있습니다.

render(
  <div>
    <Button>Normal</Button>
    <Button primary width="100">Primary</Button>
  </div>
);

// 만약 Button 컴포넌트에 전달된 props(width)가 200 미만(조건)이면
// 삼항연산자 true : "palevioletred"
// 삼항연산자 false : "white"

const Button = styled.button`
  background: ${props => props.width < 200 ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

 

2. 스타일 익스텐션

공통 스타일을 정의하고, 해당 스타일을 가지고 있지만 조금의 customization을 가미할 수 있습니다.

// The Button from the last section without the interpolations
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
// Button의 속성을 상속 받아 새로운 anchor 태그를 생성
const TomatoAnchorButton = styled(Button.withComponent("a"))`
  color: tomato;
  border-color: tomato;
`;

3. Mixin 활용

import { css } from "styled-components"

const Navigation = styled.nav`
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  ${Sticky}
`;

const Sticky = css`
  position: fixed !important;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.11);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.11);
  transition: all 0.6s ease-in-out;
  color: black;
`;

4. animation 활용

// Create the keyframes
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;
render(
  <Rotate>&lt; 💅🏾 &gt;</Rotate>
);

 

활용 사례

프로젝트를 진행하면서, styled-components의 새로운 방식을 사용했을 경우 기록 남기기