[React] React UI

1. React Styling 방법론 소개

-React + styling 도구 목록

-CSS Module

 

 

Class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음

 

스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능

 

스타일링 직접 하나하나 해야함

 

 

 

 

 

-UI framewordk (ex. Ant Design, Material UI)

 

이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음

이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천

 

해당 framework의 디자인철학을 벗어나기 쉽지 않음

컴포넌트들을 커스터마이징 하기 어려움

-CSS framework (ex. W3CSS, TailwindCSS)

 

거대한 CSS 파일 하나를 가져오는 것임

개발자가 따로 CSS 파일을 작성하지 않아도 HTML에 클래스만 적어주면 정해진 규칙대로 스타일링이 적용됨

 

CSS에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습을 또다시 해야함

 

이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천

-CSS-in-JS library (ex. styled component, emotion)

 

따로CSS파일만들것없이JSX파일안에서 스타일링까지 해결 가능함

컴포넌트 재사용성이 쉬워짐

 

JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용 할 수 있음

 

class이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음

 

스타일링을 직접 개발자가 하나하나 해야 함

 

2. JavaScript template literal

쉽게 말해 문자열 안에서 JS 표현식을 사용할 수 있게 하는 문법이다.

`${string}` => template literal 안에서 string 사용하기

 

-JavaScript "template literal" vs "string concat"

 

 

 

 

 

 

 

표현식이 섞인 문자열을 사용하고자 할 때,

String concat 과 Template literal의 비교

 

 

 

 

 

 

 

-JavaScript template literal with number

`${number}` => Template literal 안에서 number 사용하기

-JavaScript template literal with boolean

`${boolean}` => Template literal 안에서 boolean 사용하기

-JavaScript template literal with object

`${object}` => Template literal 안에서 object 사용하기

-JavaScript template literal with ternary operator

`${expression}` => Template literal 안에서 expression 사용하기

 

3. styled component 기본기

-styled component button 만들기

-styled component props 활용

-CSS 와 SCSS 비교

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SCSS 에서는 선택자 중복 회피 가능

이 외에도 SCSS variable 등 여러 추가 기능 가능

 

 

 

 

 

 

 

 

 

-SCSS in styled component 예시

+, & 등 여러 선택자를 사용할 수 있음. 중첩 선택자 스타일링 가능