21.10.22 Styling 도구(styled components) + React ( Ch1 이론, Ch2 과목카드)

Ch1 Style 도구 및 Style Component 소개

적용할 스타일들

1. grid UI (2*3, 2*4) 

2. 페이지에이션

 

# React styling 방법론 4가지

• css module : class,id 등에 random string(hush)를 달아주기 때문에 선택자가 겹칠 우려가 없음.
• css in JS library(styled components) : 따로 CSS파일 만들 것 없이 JSX 파일 안에서 스타일링까지 해결 가능.  JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음. 스타일링을 직접 해야함.
• UI framework : 이미 다 만들어져있음. 초심자에게는 좋지X
• css framework : 거대한 css파일 하나를 가져옴. 이미 만들어져있음. 초심자에게는 좋지X

실습1 React Component 스타일링 증감버튼

 

>> 최종 정리

-> 단점: App.jsx뿐 아니라 NewCounter.jsx 등 해당 클래스랑 같은 이름을 사용하는 다른 파일까지도 같은 스타일을 적용시켜버림.

 

실습2 App.module.css를 사용해 React Component 증감버튼 만들기

>> 정리

-> 단점 : 코드 충돌(button이 너무 많이 쓰임)이 일어날 수 있다.

 

실습 3 SCSS module을 이용한 React Component 스타일링

scss 문법으로 조금 더 가독성있게 바꿔줌

 

# JS template literal

문자열 안에서 JS 표현식을 사용할 수 있게 하는 문법 `hello ${name}`

 

 

# Styled Component 기본기

 

자식은 띄어쓰기 되어있음 .name .blue

최종 결과

최종 코드

 

 

Ch2 과목카드 만들기

실습 1 과목카드 만들기

이걸 만들어야 한다.

최종

구분선 추가..

개선 후

실습 3 구분선 아래 가격만들기 (무료 / 할인된 가격)

유료 무료

최종

실습 4 난이도,수업,기간과 이미지 삽입

TextsWrapper TextWrapper

실습 5 파이썬 HTML/CSS 자바스크립트 태그같은 부분 만들기

key값은 저 파이썬 HTML/CSS 자스마다 다르게 줘야함

이 다음 Set-ExecutionPolicy RemoteSigned 로 바꾸면 권한 해결 가능