1. React Styling 방법론 비교

 

1. CSS Module

• class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다.
• 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다.
• 스타일링을 직접 하나하나 해야한다.

2. UI framework

• 이미 다 만들어져 있어서 간편하고 쉽게 쓰기 좋다.
• 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다.
• 해당 framework의 디자인 철학을 벗어나기 쉽지 않다.
• 컴포넌트들을 커스터마이징하기가 어렵다.
• ex) Ant Design, Material UI

3. CSS framework

• 거대한 CSS 파일 하나를 가져오는 것
• 개발자가 따로 CSS 파일을 작성하지 않아도 HTML에 클래스만 적어주면 정해진 규칙대로 스타일링이 적용된다.
• CSS에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습을 또 다시 해야한다.
• 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다.
• ex) W3CSS, TailwindCSS

4. CSS-in-JS library

• 따로 CSS파일을 만들 것 없이 JSX 파일 안에서 스타일링까지 해결가능하다.
• 컴포넌트 재사용이 쉬워진다.
• JS값들을 props로 넘겨줘서 해당 JS값에 의도된 styling을 바로 적용할 수 있다.
• class이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없다.
• 스타일링을 직접 개발자가 하나하나 해야한다.