Chapter3 - styled-components

styled-components 패키지 다운로드

무조건 프로젝트가 있는 파일 경로 안에 설치해주어야 한다.

 

 

 

styled-components 란?

CSS-in-JS 라이브러리 중 하나이다!

컴포넌트에 스타일을 직접 입히는 방식이라고 편하게 생각해도 된다.

 

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

- 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적입니다!

위 두가지 이유 때문에 컴포넌트 스타일링 기법중 괜찮은 방식이다.

 

 

 

사용법?

 

App.js 상단에 import를 해준다.

이후 하단 export 위에 스타일을 작성해준다.

백틱(``)을 써야함!!

 

 

컴포넌트처럼 사용하고 있는데 이 친구도 컴포넌트이기 때문에 데이터를 가지고 있을 수 있기 때문에 props를 줄 수도 있다.

이렇게 사용 가능한데 중괄호 안에 백틱(``)을 써주면 삼항연산자도 활용 가능하다!

결과

 

false일 경우

 

 

 

 

TIP. 스타일 컴포넌트 안에서 SCSS도 사용할 수 있다 (지금 다뤄볼 것은 네스팅(묶어주기))

 

추가로 나 자신을 지칭할 때는 &: 를 쓴다.

ex)