리액트 공부하기 - 스타일링 파트.. 각각 언제쓰면 좋을까 ?

 

 

스타일링 파트에도 정말 다양한 것들이 많아서 ..

뭘 어떻게 써야할지 아직 감이 안온다 ...

 

각각 장단점들이 확실하고..

예를 들어, scss는 변수나 계층 나누기도 쉽고, 편리한 반면 어떠한 단점도 분명히 존재할거고

테일윈드는 빠르고 구성이 가능하다면.. 반복적인 코드를 작성하기 어렵고 (-> 가능하다고 한다.) 

 

 

간단히 나 혼자 만들 땐, 빠른 테일윈드를 쓴다던가 

협업을 해야한다면 스타일 컴포넌트를 쓴다던가.

그 안에서도 또 나뉘겠지만 ?

 

이렇기 때문에, 역시 뭐든 상황에 따라 달리 써야하는 것 같다. (= 결국 다 배워놔야 한다 라는 결론에..)

 

또한 이러한 라이브러리들도 변화하는 속도나 대체되는 속도도 빠르기 때문에

아무튼 이렇게 새로운 과목을 공부하고 익숙해지는 것에 또 익숙해져야겠지 ! 

 

---

 

 

✎ 상황별 스타일링 방법 정리

간단한 개인 프로젝트(빠르게 만들고 끝낼 때)	테일윈드 CSS	설치만 하면 바로 사용 가능, 빠르고 간편
디자인 시스템 없이 소규모 프로젝트(반복되는 스타일이 많고 계층적으로 정리하고 싶을 때)	SCSS (SASS)	변수, 믹스인, 중첩 가능 — 가독성, 재사용성 좋음
컴포넌트 단위로 재사용하고 싶을 때(props로 스타일 바꾸고 싶을 때)	스타일드 컴포넌트	JS안에서 props로 스타일 쉽게 제어 가능
빠른 레이아웃 설계 + 재사용 가능한 컴포넌트로 묶을 때(프로토타이핑 + 유지보수 고려)	테일윈드 CSS + 컴포넌트화	테일윈드로 기본 스타일 잡고, 공통 UI는 컴포넌트로
협업하는 대규모 프로젝트(역할 명확히 나누고 유지보수 쉽게)	스타일드 컴포넌트 or Emotion	각 컴포넌트별로 스타일 관리, 독립성 확보
정해진 디자인 가이드나 UI 키트가 있을 때	CSS Module + SCSS	컴포넌트 단위로 스타일링 + 변수 & 믹스인 활용
반응형이나 테마(다크모드 등)를 쉽게 적용하고 싶을 때	테일윈드 CSS	반응형, 테마 클래스가 이미 준비돼 있어서 빠름

 

 

 ✎요약해서 한 줄로 정리하면

 

빨리 만들어야 할 때	테일윈드
반복되는 스타일 정리할 때	SCSS
컴포넌트 안에서 props로 스타일 바꿀 때	스타일드 컴포넌트
디자인 시스템 없이 협업할 때	스타일드 컴포넌트
반응형 & 다크모드 빠르게 만들 때	테일윈드
UI 키트 기반 & 디자인 가이드 있을 때	CSS Module + SCSS

 

 

“이걸 꼭 써야 해!” 정답은 없고, 상황 따라 효율적으로 고르는 것