React JS 마스터 클래스 수강 - TIL(Today I Learned) - styled-components

시작하기 전에 참고...
무료 리액트 강의 - ReactJS로 영화 웹 서비스 만들기

---

Structure

• Step1. STYLED COMPONENTS
• Step2. TYPESCRIPT
• Step3. CRYPTO TRACKER
• Step4. STATE MANAGEMENT
• Step5. TRELLO CLONE
• Step6. ANIMATIONS
• Step7. NOMFLIX CLONE
• Step8. GATSBY BONUS

---

Styled Components

Why Styled Components

참고하면 좋은 페이지
Rest CSS
CSS Module
Styled-Components

• 많은 스타일 적용 라이브러리가 존재하지만, 왜 Styled Components를 사용하는지, 이것이 ReactJs를 사용하면서 생산성에 어떻게 영향을 미치는지에 대해
  - It can be make Dark Mode, Light Mode super easy.
  • 많은 유수의 기업들이 사용.

Styled Components를 쓰기전, CSS를 적용하기 위한 보통의 방법

1. style.css 같은 css 파일을 생성하여 컴포넌트에 적용.

style.css

index.js

2. style attribute에 직접 입력

3. css module

- CSS 클래스가 중첩되는 것을 완벽히 방지.
- CRA로 만든 프로젝트에서 CSS 모듈을 사용하기 위해서는 css의 파일 확장자를 `.module.css`로 생성
- 클래스 이름에 대하여 고유한 이름이 생성되어, CSS 이름 중복 같은 휴먼 에러를 방지.

Sample.module.css

Sample.js

4. Styled-Components

- Tagged Template Literal
- yarn add styled-components 필요.

---

Our First Styled Components, Adapting and Extending

config

shell

npx create-react-app react-masterclass # cra init
npm i styled-components # add styled-components lib

vscode ctrl-p extension

ext install vscode-styled-components# for styled-components in vscode 

code

App.js

'As' and Attrs

다수의 컴포넌트를 다룰 때 도움이 되는 트릭들(tag, tag 속성 변경)

situation 1, 컴포넌트의 태그를 바꾸고 싶지만 스타일은 바꾸고 싶지 않을 때

situation 2, Styled-Components에서 HTML 태그의 속성을 설정

Animations and Pseudo Selectors

다수의 컴포넌트를 다룰 때 도움이 되는 트릭들(애니메이션, Selectors)

Animations

Pseudo Selctors

---

Super Recap

배운것들 복습

---

Themes

Light Mode, Dark Mode, ETC...

index.js

App.js

Result

---

오늘자 느낀점. (2022-01-08 (토))

• 그동안 리액트 토이 프로젝트를 하면서 사용하던 styled-components에 대한 많은 팁을 배울 수 있었다.
• sass, BEM, css module등 여러 방법으로 css를 작성해왔지만 이게 왜 필요한지, 어떻게 하면 잘 쓸 수 있는지에 대한 공부를 등한시하던 것이 부끄러웠다.
• 특히 'As' and Attrs 와 Pseudo Selectors, Adapting and Extending 기능은 정말 꿀팁이였다고 생각한다.
• 그렇다면, styled-components 라이브러리는 위와 같은 기능을 어떻게 제공할 수 있을까?
  - 개인적으로는 그 답은 webpack에 있다고 생각한다.
  • 나는 javascript에서부터 typescript 발전이 npm, webapck 에서 왔다고 생각하기 때문에 그 내부 구조에 대한 호기심이 들어 시간 날 때 읽어보고자 한다.

• 참고 velog : CRA의 원리
• 참고 guide : 웹팩 핸드북
• 참고 문서 : 웹팩 공식 문서
• 참고 blog : npm 패키지-사용방법과-원리
• 참고 문서 : npm 공식 문서