React로 프로젝트를 진행하면서, CSS스타일링을 SASS에서 Styled Components로 변경해 진행하게 됐다. 처음엔 멘붕의 연속이였지만, 한 파일안에 스타일링까지 모두 관리할 수록 그 편리함에 빠져들고 있어 간단히 개념과 사용예시를 정리해본다.

💅 Styled Components란?

현대 웹 앱은 점차적으로 컴포넌트를 기반으로 고안되고 있고, 이에 따라 CSS 스타일링 또한 컴포넌트를 기반으로 재구성되고 있다. 이러한 흐름 속에서 등장한 패러다임이 CSS-in-JS (JS파일 안에서 CSS를 함께 관리하는 것)이고, 그 중 가장 인기 있는 라이브러리가 바로 Styled Components

Styled Components을 사용하는 이유

• 위와 같이 클래스명을 해시값으로 자동 생성하므로 클래스명 오염을 방지한다.
• CSS 문법을 온전하게 사용할 수 있다.
• 자바스크립트의 동적인 값들을 온전하게 사용할 수 있다.
• 컴포넌트와 스타일이 하나의 파일로 결합되어 모듈화가 수월해진다.

사용 예시

컴포넌트 파일의 상단에 아래와 같이 styled-components 라이브러리에서 import 해온 styled라는 객체를 사용하도록 코드를 작성한다.

import styled from 'styled-components'

컴포넌트가 export되는 부분 밑에 스타일링이 시작된다!
아래 코드를 보면, Arrow라는 button태그의 styled-component를 만들었음을 알 수 있다.

...코드 생략...
export default `컴포넌트명`;


const Arrow = styled.button`
  position: absolute;
  top: 100px;
  direction: ${props => props.direction};
  color: #e5e5e5;
  opacity: 0.5;
  font-size: 60px;
  cursor: pointer;
  z-index: 1;

  &:hover {
    opacity: 1;
  }
`;

상속될styled-component명.withComponent(태그명)을 통해 스타일링 상속도 가능하다. 아래 코드를 보면 LeftArrow와 RightArrow라는 styled-component는 Arrow의 스타일링 속성을 상속받았음을 알 수 있다.

const LeftArrow = styled(Arrow.withComponent("button"))`
  left: 0px;
`;

const RightArrow = styled(Arrow.withComponent("button"))`
  right: 0px;
`;

📌 참고 학습자료
styled-components 공식문서