[React] Styled Components 사용법

React에서는 다양한 방법으로 CSS를 적용할 수 있다

그 중에서는 Styled Components라는 방법도 있다. 

 

Styled Components 란?

• React에서 스타일을 작성하기 위한 CSS-in-JS라이브러리이다.
• 컴포넌트기반으로 스타일을 정의하고 관리가능하다.
• JavaScript / TypeScript를 사용하여 스타일을 동적으로 생성할 수 있다.

1. 설치

• 사용하기 위해서는 우선 라이브러리를 프로젝트에 먼저 설치해야한다.
• VSCORD 기준으로 터미널에 npm을 사전에 설치한 후 다음 명령어를 통해 설치한다.

npm install styled-components

 

2. (예시) 사용방법

• 사용을 위해서는 설치한 패키지에서 우선 styled를 import를 해야한다.

import styled from "styled-components";

 

• 기본적인 적용방법은 style.button과 같이 작성한 후 적용할 CSS 스타일을 작성하면 된다. 

//import 해준다. 
import styled from 'styled-components';

//버튼이라면 styled.button , div라면 styled.div

const Skybluebtn = styled.button`
  background-color: skyblue;
  color:white;
`;

// 컴포넌트 사용 예시
const App = () => {
  return <Skybluebtn>안녕하세요 버튼입니다.</Skybluebtn>;
};

 

 

• 위와 같이 기본적인 방법으로 작성하면 중복되는 코드가 있는 버튼이어도 색상이 다르면
  다시 한번 작성해야한다는 문제가 생긴다.
• 그런 경우는 props를 통해 각각의 컴포넌트 마다 원하는 속성을 적용할 수 있어 응용하여 사용할 수 있다.

const Skybluebtn = styled.button`
  background-color: ${(props) => props.bgColor};
  // bg가 green이면 화이트 아니면 black 
  color: ${ props => props.bg == 'green' ? 'white' : 'black' };
  padding : 20px;
  width : 100px;
`;

const App = () => {
  return (
    <div>
      <Skybluebtn bgColor={"green"} />
      <Skybluebtn bgColor={"skyblue"} />
    </div>
  );
};

 

• 기존에 있던 컴포넌트의 속성을 이용해서 새로운 컴포넌트에 적용하는 방법도 있다.

//기존 Box div
const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

//컬러속성만 추가 그 외에는 Box와 동일 
const Circle   = styled.(Box)`
  color: white;
`;


const App = () => {
  return (
    <div>
      <box bgColor={"green"} />
      <Circle bgColor={"white} />
    </div>
  );
};

 

 

3. 기타

• Styled Components의 가장 큰 장점은 페이지의 로딩시간을 줄여주고 다른 js파일로 스타일을 오염시키지 않는다는 점 이다.
• 단점으로는 일반 컴포넌트인지 스타일 컴포넌트인지 구분이 어려워져 JS 파일이 매우 복잡해질 수 있다.