[React] Styled Component란?

 

오늘은 Styled Component에 대해 알아보겠습니다. :)

 

 

 

[ Styled Component ]

React, Vue, Angular와 같은 라이브러리, 프레임워크가 인기를 끌면서 재활용 가능한 컴포넌트 기반 개발이 주류가 되고 있습니다. 여러 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 모두 담는 코드를 많이 사용하고 있습니다. React는 이미 JSX를 통해 HTML을 포함하고 있고, Styled Component 라이브러리를 사용하여 CSS를 JavaScript에 삽입할 수 있습니다.

 

 

[ 설치 방법 ]

npm install --save styled-components

 

 

[ SASS는 불충분한가요? ]

• CSS 클래스명에 대한 고민 문제
• 가이드가 없으면 복잡해지는 구조
• 방대한 스타일 정보로 인한 스크롤 지옥
• CSS 클래스 조건부 스타일링
• 동적인 변화 표현에 한계

 

그렇다고 Inline Style을 사용하자니 우선순위의 문제, HTML 파일의 부피 증가, CSS 역할 분리가 모호함, media query, key frame, Pseudo selector 사용 불가 등의 문제가 있습니다.

 

[ Styled-components란? ]

• CSS in JavaScript 기술로, JavaScript내에 CSS를 작성하는 라이브러리
• 스타일 정의를 CSS파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
• 클래스명을 해시값으로 자동 생성하고, 클래스명 오염을 방지할 수 있음
• 자바스크립트의 동적인 값들을 온전하게 사용이 가능

[ 사용법 ]

import React from 'react';
import styled from 'styled-components';
 
const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
 
  &:focus {
    outline: none;
  }
 
  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;
 
 
 
export default Button;
 

 

 

 

위 사진과 같이 클래스명을 해시값으로 자동 생성하는 것을 볼 수 있습니다.