[복습]React 주요 개념 정리 - styled-components

styled-component를 복습해보기전에 SASS, SCSS에 대해 간단히 알아보고 넘어가자.

 

SCSS는 SASS의 3번째 버전에 추가된 친구인데, SASS의 모든 기능을 사용할 수 있고 CSS호환도 잘된다고한다!

이친구 사용을 위해 본격적으로 패키지를 설치해주자!

 

yarn add node-sass@4.14.1 open-color sass-loader classnames

 

다행히 강의에서 필요한 패키지를 모두 가져다 주셔서 수월하게 진행할 수 있었다!

나 혼자만의 프로젝트를 진행하게된다면 필요한게 뭔지 파악하는것도 중요해 보인다.

 

* 공식문서 & 테스트사이트

https://sass-lang.com/documentation

Sass: Documentation

https://www.sassmeister.com/

SassMeister | The Sass Playground!

 

SassMeister | The Sass Playground!

1. SCSS 주요문법

 - 기본 문법은 CSS와 동일하다. 

 - Nesting이 가능하다.

    → div 아래 p, img태그에 스타일을 줄때 각각 다른 블럭을 만들 필요도 없고, 축약형으로 묶을수도있다.

   

div {

    p{

          color: #888888;

          font: {

                    family:sans-serif;

                    size: 14px;

                   }

        }

img {
        width: 400px;

      }

}

 

 - 상위 요소 이어쓰기는 &로 클래스명, 글자도 이어쓸 수 있다.

div {

      background-color: green

      &:hover { background-color: blue }

}

.div {
      background-color: green

      &_blue { background-color: blue }

}

 

- 문자열을 치환할 수 있다.

$defaultSize: 20px;

$className: blue;

 

p{
font-size: #{$defaultSize};

&.#{$className} {color: #{$className}}

}

 

이제 styled-components 사용하는 방법에 대해 복습해보자.

 

2. 패키지 설치하기

yarn add styled-components

 

3. styled-components 장점

 - class 이름짓기에서 해방된다!

 - 컴포넌트에 스타일을 적기때문에 간단하고 직관적이다.

    (CSS-in-JS 라이브러리 중 하나며, 컴포넌트에 스타일 직접 입히는 방식)

 

4. styled-components 적용하기