리액트에서 styled-components로 스타일링 하기

1 분 소요

styled-components란?

styled-component는 리액트에서 사용하는 대표적인 CSS-in-JS 라이브러리 입니다. 스타일을 자바스크립트 파일에 내장시켜 사용할 수 있으며 CSS 커스텀 컴포넌트를 만들어서 쉽게 재사용할 수 있습니다.

먼저 터미널에 아래 명령어를 입력하여 styled-components를 설치합니다.

npm install styled-components

그리고 적용하려는 components 파일 상단에 아래 한 줄을 import 합니다.

import styled from "styled-components";

기본적인 사용방법은 아래와 같습니다.

const MyStyle = styled.div`
  color: blue;
`;

위와 같이 고정된 blue 색상을 주는 MyStyle 컴포넌트를 만들어주도록 하겠습니다.

<MyStyle>안녕하세요</MyStyle>

해당 컴포넌트를 사용하면 아래와 같은 실행결과를 얻을 수 있습니다.

이렇게 고정적인 스타일링을 하는 것은 좋은 예가 아닙니다. 이렇게 만들게 되면 색을 바꾸고 싶을 때 마다 새로운 컴포넌트를 계속 만들어줘야 합니다.

그래서 좀 더 효율적으로 컴포넌트를 만들기 위해서는 props를 잘 활용해야 하는데요. props를 활용한 예는 아래와 같습니다.

const MyStyle = styled.div`
  color: ${(props) => props.myColor};
`;

<MyStyle myColor="red">안녕하세요</MyStyle>

직접 만든 컴포넌트 뿐만 아니라 AntD와 styled-components를 함께 사용할 수 있습니다.

import { Switch } from "antd";
import "antd/dist/antd.css";
import styled from "styled-components";
import "./App.css";

const StyledSwitch = styled(Switch)`
  &[aria-checked="true"] {
    background: green;
  }
  &[aria-checked="false"] {
    background: red;
  }
`;

위 코드에서 &은 부모 선택자입니다.

<StyledSwitch checkedChildren="ON" unCheckedChildren="OFF" defaultChecked />

오늘은 리액트에서 styled-components로 스타일링 하는 방법에 대해 공부했습니다. AntD를 사용하다보면 앞으로 가끔씩 커스텀 스타일링을 하게 될 경우가 생길 듯 한데 오늘 공부한 내용을 잘 활용하면 좋을 것 같습니다 :)

🔔포스팅 공지
개인 공부 기록용 블로그 입니다.
잘못된 부분이 있을 시 메일이나 댓글로 지적해주시면 감사드리겠습니다 :)