styled-component

React CSS-in-Js관련 라이브러리중에서 가장 인기가있다. 자바스크립트 파일 안에서 CSS를 작성하는 형태이다. 그렇기때문에 .css/.scss 파일을 만들지 않아도 된다.

1. 시작하기

$ yarn add styled-component

2. 문법

문법은 공식문서를 참고하며 익히고 정말 좋은 라이브러리임을 느꼈다. 그리고 기본 사용법이 쉬워 금방 익혔다. 다만 기억하면 좋을 유연한 부분들에 대해서만 적어보려한다.

선택자

• & 선택자 :: & 문자를 사용하여 Sass처럼 자기 자신을 선택가능하다.

props

• props 를 사용하는 것이 큰 특징이었는데, css를 이렇게 사용할 수 있다는 놀라움에 빠져 굳이 비교하지 않아도 되는 elements를 비교해서 엄.청.난 사이드이펙트를 낳을뻔 하였다.
• props를 사용해서 값이 true 일 때 특정 스타일을 부여해 줄 수 있다.

${props =>
    props.name &&
    css`
      color: yellow;
      }
    `};

Theme

• css 관리를 글로벌로 할 수 있는 기능이다. 자주 사용되는 색상이나, font-size 등을 객체형태로 커스텀해서 사용할 수 있다.

인자

• 컴포넌트 형식의 값을 인자로 넣어줄 수 있다.

const StyledContainer = styled(Container)`
  margin: 0 auto;
`

3. 정리

이 외에도 정말 다양한 방법으로 캡슐화된 코드를 구현할 수 있지만, 더 많은 사용을 해봐야할거같다. 그리고 CSS-in-Js 관련 다른 라이브러리도 존재한다는 것을 알았다.