React | 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 공식문서

 

본 글은 2021년 9월 19일 개인 블로그(velog)에 작성된 글입니다.