Styled_Components

컴포넌트에 CSS를 미리 적용하여 생성하는 CSS전처리기

JavaScript에서는 DOM Element에 특정 이름(id, class)을 부여해 CSS파일에서 style을 개별적으로 관리했다.

styled-components는 위의 방법과는 다르게 컴포넌트 자체에서 이름을 부여해 style을 지정한다.

이러한 방식은 컴포넌트 내부에서 style을 적용하기 때문에 CSS가 전역으로 중복되지 않는다.

기본적인 사용방법은 다음과 같다.

사용 방법

1. 아래 명령어를 통해 관련 패키지를 설치한다.

npm i styled-components

2. 템플릿 리터럴(Template literal)을 사용해 styled components를 생성하여 변수에 할당한다.

// antd 컴포넌트 스타일링
const LikeBtn = styled(LikeOutlined)`
  font-size: 1.5rem;
  margin-right: 0.5em;
`;

// DOM Element 스타일링
const LikeText = styled.span`
  font-size: 1.5rem;
`;

3. 변수를 사용할 컴포넌트에 적용한다.

import React from 'react';
import { LikeOutlined } from '@ant-design/icons';
import styled from 'styled-components';

const LikeBtn = styled(LikeOutlined)`
  font-size: 1.5rem;
  margin-right: 0.5em;
`;

const LikeText = styled.span`
  font-size: 1.5rem;
`;

const Home = () => {
  return (
    <>    
      {/* <LikeOutlined /> */}
      <LikeBtn />
      
      {/* <span>Hello, Styled Component!!</span> */}
      <LikeText>Hello, Styled Component!!</LikeText>      
    </>
  )
};

export default Home;

다음과 같이 컴포넌트에 정상적으로 style이 적용되는 것을 확인할 수 있다.

참고 자료

styled-components 공식문서
벨로퍼트와 함께하는 모던 리액트 - styled-components
React로 NodeBird SNS 만들기 - 제로초