<aside>
🚩 Goal: styled-components을 사용하여 CSS-in-JS 방식을 통해 컴포넌트를 꾸며봅니다.
</aside>
[목차]
1. CSS-in-Js란?
1_exported (1).mp4
- (1) css-in-js란 무엇인가?
- (2) styled-components 란 무엇인가?
2. styled-components 준비하기
- (1) VScode 플러그인 설치
- (2) yarn 에서 styled-components 설치하기
3. styled-components 사용하기
- (1) 기본적인 사용법 알아보기
- (2) 조건부 스타일링이란?
- (3) 조건부 스타일링 구현해보기
- (4)🔥 [어려울 수 있지만 도전!] Swtich문과 map을 사용해서 리팩토링 해보기
4. 정리
- CSS-in-JS란, 자바스크립트로 CSS코드를 작성하는 방식을 말한다.
- props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링을 할 수 있다.
<aside>
✊ [화이팅!] 어려운 것이 아니라, 익숙하지 않은 것이다.
CSS만 사용하다가, styled-components를 사용해보니 어떠신가요? 아직까지는 많이 익숙하지 않고 복잡해보이죠? 하지만 계속 반복해서 코드를 보고 손으로 써보며 연습하면 점점 익숙해지게 될 것 입니다.
</aside>
5. 더 알아보면 좋은 키워드