Styled Component

eunsonny·2020년 11월 15일
0

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 관련 다른 라이브러리도 존재한다는 것을 알았다.

profile
코린이 🙆

0개의 댓글