styled-components

styled-components 모듈 설치

npm install styled-components

styled-components란?

컴포넌트 마다 css, Sass 파일들을 각자 만들어서 관리하는 것이 아니라,

컴포넌트 파일 내에서 style을 지정하고 적용 가능하게 하는 라이브러리이다.

리액트의 CSS-in_JS 관련 라이브러리 중에서 가장 인기있는 라이브러리이기도 하다.

예시 코드를 보면서 이해해본다.

먼저 style 관련 코드를 작성해보았다.

// style 관련 코드
import React from 'react';
import styled, {css} from 'styled-components';

const Box = styled.div`
  /* props로 넣어준 값을 직접 전달할 수 있다 */
  background: ${props => props.color | 'blue'};
  padding: 1rem;
  display: flex;
`;

const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;

  // &를 사용하여 Sass처럼 자기자신 선택 가능
  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  // 다음 코드는 inverted 값이 true일 때, 특정 스타일을 부여한다
  ${props => props.inverted && css`
    background: none;
    border: 2px solid white;
    color: white;
    &:hover {
      background: white;
      color: black;
    }
  `};

  & + button {
    margin-left: 1rem;
  }
`;

실제 style이 적용될 template, 즉 컴포넌트의 코드는 아래와 같다.

const StyledComponent = () => (
  <Box color="black">
    <Button>일반 버튼</Button>
    <Button inverted={true}>테두리 표시 버튼</Button>
  </Box>
);

export default StyledComponent;

Tagged Template Literal

ES6 문법 중 하나로, grave accent(``)를 사용하면 내부에 Javascript 객체나 함수가 전달될 때 구별하여 사용할 수 있기 때문이다.

아래와 같이 사용하면 제대로 된 예상값을 얻을 수 없다.

`hello ${{foo: 'bar'}} ${() => 'word'}!`
// result: "hello [object Object] () => 'world'!"

[object Object] 와 같은 식의 문자열로 들어가게되면서 형태를 잃게 된다. 만약 함수를 다음과 같이 만들어서 사용하면 이 template literal 안에 넣어준 값들을 온전히 알아낼 수 있게 된다.

function tagged(...args) {
    console.log(args);
}
tagged`hello ${{foo: 'bar'}} ${() => 'world'}!`

결과값은 다음과 같을 것이다.

(3) [Array(3), {...}, f]
0: (3) ["hello ", "", "!", raw: Array(3)]
1: {foo: "bar"}
2: () => 'world'

스타일링 된 element

스타일링 된 element를 만들 땐, 먼저 import한 뒤에 사용해야 한다.

1. styled라는 명칭을 styled-components 모듈로부터 import 한다.
2. styled.태그명의 형태로 구현한다. (태그명은 button, input 등 원하는 걸로)

import styled from 'styled-components';

const MyComponent = styled.div`
    font-size: 2rem;
`

3. 태그의 형식이 유동적이거나, 특정 컴포넌트에 스타일을 줘야하는 경우는 다음과 같다.

// 문자열로 styled 함수의 인자로 준다
const MyButton = styled('button')`
    background: green;
`

// 컴포넌트 형식의 값을 넣어준다
const StyledInput = styled(Input)`
    background: blue;
`

스타일에서의 props 조회

스타일링한 컴포넌트에 전달된 props 값은, 스타일에서도 그대로 사용 가능하다.

const Box = styled.div`
    // props로 넣어준 값을 직접 전달 가능
    background: ${props => props.color || 'blue'};
    padding: 1rem;
    display: flex;
`

props에 따라 조건부 스타일링 하기

CSS 클래스를 사용해왔다면 주로 클래스명으로 조건부 스타일링을 했을 것이다.

styled-components에서는 props로도 처리가 가능하다.

import styled, { css } from 'styled-components';
// 단순 변수 형태가 아니라 여러줄의 스타일 구문을 조건부로 설정해야 하는 경우엔 css를 불러와야 한다.
const Button = styled.button`
    background: white;
    color: black;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 500;

    &:hover {
        background: rgba(255, 255, 255, 0.9);
    }

    //조건부 렌더의 예시, inverted 값이 true인 조건에서만 특정 스타일링
    ${props => props.inverted && css`
        background: none;
          border: 2px solid white;
          color: white;
          &:hover {
            background: white;
        color: black;
          }
    `};
    & + button {
        margin-left: 1rem;
      }    
`;