리액트를 사용하면서 SASS 를 사용하게 됐다. 기존의 CSS 만을 사용하는 경우에 비해서 nesting으로 인한 편리함이 마음에 들었다. 또, class 명 역시 비교적 길어지지 않게 작성할 수 있어서 편리했다. 하지만, 여전히 class 명에 대한 고민은 존재했고 동적인 효과를 위해서는 코드를 여러번 작성해야하는 경우도 많았다. 이를 해결하기 위해서 등장한 것이 Styled-Component이다.

Styled Component

Styled Component 는 위에서도 말했던 것처럼 여전히 존재하는 문제들을 해결하기 위해서 고안됐다.

• CSS 클래스 명에 대한 고민은 여전합니다.
  • ex. BEM (.block__element--modifier, button button--state-success)
• 정해진 가이드가 없으면 구조가 복잡해집니다.
• 방대한 스타일 정보로 인한 스크롤 지옥도 여전합니다.
• 여전히 CSS 클래스로 조건부 스타일링을 하고 있습니다.
• CSS 클래스로 조건부 스타일링을 하더라도 동적인 변화를 표현하기에 한계가 있습니다.
  • ex. 1초에 px 값을 1씩 증가 → Inline 스타일에 의존

실제로 SASS 를 사용하면서 편리함을 느꼈지만 여전히 존재했던 문제들이다. 특히 프로젝트를 진행하면서 4가지 버전의 레이아웃을 동적으로 구현했어야 했는데 이 경우에 코드가 상당히 길어지는 일을 겪었다. 또한, 동적인 효과를 위해서 class를 사용하다보니 제약이 생기는 경우도 많았다.

그렇기 때문에 이제는 JS 를 통해서 CSS 까지 함께 할 수 있는 방법인 Styled Component가 나오게 됐다.

사용 예시

const Button = styled.button`
  position: absolute;
  top: 50%;
  ${props => (props.direction === 'left' ? 'left:0' : 'right:0')};
  font-size: 1.5rem;
  transform: translateY(-50%);
`;

위의 경우를 보자. 동일한 Button 이라는 이름을 가진 요소이지만 props 으로 전달받은 direction 에 따라서 다른 스타일을 가지는 것을 알 수 있다.

const List = styled.div`
  position: absolute;
  width: 100%;
  height: 400px;
  padding: 40px 0 0 0;
  background: ${props => props.background};
  opacity: ${props => (props.isCurrentSlide ? 1 : 0)};
`;

또한, 위의 경우처럼 해당 요소의 상태에 따라서 자동으로 동적인 스타일을 부여할 수도 있다. 위 코드를 보면 isCurrentSlide 라는 값을 통해서 현재 보고 있는 슬라이드인 경우에는 opacity 가 1이며 아닌 경우에는 0이 되는 것을 알 수 있다.