React - styled-components?

npm i styled-components

 

먼저 설치가 필요한 모듈이기때문에 설치를 하고,

 

임포트!

import 해서 사용한다!

 

얘를 사용함으로써 얻는 특징은 style이 안에 있는 컴포넌트를 생성 할 수 있게 한다고한다!

 

 

이런식으로!! 컴포넌트 내부에서 CSS를 만들고 입힐수 있는것!

 

VSC를 사용하고있다면, extension에서 vscode-styled-components를 검색하면, 자동완성 기능까지 사용할 수 있다!

 

코드를 보면 어떤식으로 사용하는지 알 수 있다!

 

const (이름) = styled.태그명 `(css코드)`;     * css 코드를 감싸고 있는것은 백틱이다. *

 

이런식으로 사용한다.

 

* Prop값도 줄수 있다고한다. *

 

이렇게 styled-components 모듈을 이용하면, 클래스네임을 일일히 외워서 코딩하는것보다 좀 더 편해진다! 

(물론 사람들마다 각자 편한 방법이 있겠지만)

 

그리고 이 방법도 CSS 모듈처럼 코드를 짜고 웹에서 F12를 눌러 클래스 이름을 확인해보면 임의로 생성된 클래스네임을 확인 할 수 있다!