Styled-Components 사용방법

새 리액트 프로젝트를 생성합니다

Styled-Components를 설치합니다

$ npm install styled-components

사용하지 않는 코드는 날리고 이 상태에서 시작하겠습니다

import React from "react";

function App() {
  return <div />;
}

export default App;

styled-components 를 사용할 땐 import를 통해 불러옵니다

import styled from "styled-components";

컴포넌트 이름을 생성합니다

const Circle = styled.div``;

스타일을 지정합니다

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: black;
  border-radius: 50%;
`;

이제 Circle를 랜더링 해주겠습니다

function App() {
  return <Circle />;
}

서버를 켜고 확인해봅시다

그럼 이제 색상을 props로 넣어보겠습니다

props 이름은 color로 지정했습니다

return <Circle color="blue" />;

이제 이 color를 함수로 가져와서 파라미터로 생성해줍니다

background: ${(props) => props.color};

이번엔 크기를 키워보겠습니다

props를 생성합니다

return <Circle color="blue" huge />;

huge라는 값이 설정되었을 때, 여러줄의 스타일을 적용하는 방법을 알아보겠습니다

${props => props.huge && ``}

props.huge가 true일 경우

${(props) =>
    props.huge &&
    `
  width: 10rem;
  height: 10rem;
  `}

편하긴하지만 단점도 있습니다

내부에서 추가적인 Props를 읽어올 수 없습니다

${(props) =>
    props.huge &&
    `
    ${props => }
  width: 10rem;
  height: 10rem;
  `}

그 이유는 Tagged Template Literal이 아닌 그냥 Template Literal이기 때문입니다

Tagged Template Literal를 추가적으로 사용하기 위해선 import에 css를 불러와주고

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

이렇게 css도 추가해줍니다

${(props) =>
    props.huge &&
    css`
      width: 10rem;
      height: 10rem;
    `}

총 코드

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

const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: ${(props) => props.color};
  border-radius: 50%;
  ${(props) =>
    props.huge &&
    css`
      width: 10rem;
      height: 10rem;
    `}
`;

function App() {
  return <Circle color="blue" huge />;
}

export default App;