styled-components

styled-components는 인기있는 컴포넌트 스타일링 라이브러리입니다. 기존에 CSS를 활용하여 스타일링을 할 때는 따로 CSS 만들어서 import 시켜야했었는데요. styled-components를 이용하면 자바스크립트 파일 내부에 스타일을 정의할 수 있습니다. 따라서 별도의 .css 파일이 생기지 않는다는 장점이 있습니다.

이러한 방식을 CSS-in-JS라고 부릅니다. 사실 CSS-in-JS 방식을 지원하는 라이브러리는 다양하게 나와있지만 styled-components가 현재 가장 많이 사용되어지고 있기 때문에 이 라이브러리를 소개하려고 합니다.

yarn add styled-components

styled-components 사용하기

styled-components는 Tagged Template Strings문법을 사용해서 작성합니다. 따라서 다음 실습을 하기 전에 해당 포스트를 읽어봐주세요.

요소 스타일링

styled-components를 사용하기 위해서는 stlyed를 import하고 styed.태그명과 같은 방식으로 사용합니다.

import styled from 'styled-components';

const Text = styled.div`
  color: #3623ed;
`;

const Button = styled.button`
  background: #c4c4c4;
  color: #000;
  align-items: center;
  
  &:hover {
    background: #282c34;
    color: #61dafb;
  }
`;

sass라는 css의 전처리기에서 사용하는 부모 선택자&를 사용할 수도 있습니다. 부모 선택자는 선택자가 포함된 부모요소, 위 예시에서는 버튼 자기자신을 가리킵니다.

특정 컴포넌트에도 속성을 적용시키기 위해서는 다음과 같이 사용합니다.

const StyledComp = styled(컴포넌트 이름)``;

스타일에서 props 참조하기

styled-components는 컴포넌트로 전달된 props를 스타일에서 참조할 수도 있습니다.

//만약 컴포넌트의 props로 color를 전달받았다고 가정하면
<Text color={'red'}/>

//다음과 같이 사용할 수 있습니다.
const Text = styled.div`
  color: ${props => props.color || '#3623ed'};
`;

props 조건부 스타일링

props를 이용해서 조건부 스타일링을 할 수도 있습니다. 변수를 이용해서 스타일링을 할 경우 props를 이용하면 되지만 아래 코드와 같이 여러 줄의 조건부 스타일링을 할 경우 css를 import 해주세요.

//inverted라는 props를 전달해줍니다.
<Text inverted={true}/>

/**/
import styled, {css} from 'styled-components';

const Text = styled.div`
  color: ${props => props.color || '#3623ed'};

  ${props => props.inverted &&
          css`
            color: red;

            &:active {
              color: blueviolet;
            }
          `};
`;

props.inverted가 true일 경우 조건부 스타일링을 실시합니다. 조건부 스타일에서 css를 사용하지 않고 일반 템플릿 문자열 형태로 넣어도 되지만, 이렇게 삽입하는 경우 내부에서 props를 활용할 수 없다는 문제가 있습니다. 따라서 props를 스타일링에 활용한다면 css를 사용하고 아니라면 사용하지 않아도 됩니다.

미디어쿼리

반응형 웹 디자인을 위한 미디어쿼리도 사용이 가능합니다. 일반 CSS에서 미디어쿼리를 사용하듯이 사용하면 됩니다.

const Text = styled.div`
  font-size: medium;
  
  @media (max-width: 768px) {
    font-size: large;
  }
  @media (max-width: 1024px) {
    font-size: x-large;
  }
`;