[React] styled-components를 사용하는 이유

리액트 컴포넌트 스타일링 방식

 

1. CSS

• 중복되는 클래스명 사용 금지
• CSS파일 만들어서 import

 

---

2. SASS(Syntactically Awesome Style Sheets: 문법적으로 짱 멋진 스타일시트)

• CSS pre-processor
• 코드의 재활용성과 가독성을 높여 유지보수를 쉽게 해줌
• SCSS와 SASS확장자를 지원하는데 주로 SCSS를 더 많이 사용 함
• 기본문법은 CSS와 동일
• Nesting가능
  • 상위 요소 이어쓰기는 "&" 사용(클래스명 등 글자도 이어쓰기 가능)
  • 문자열 치환 가능(변수 쓸 수 있음)

 

---

3. styled-components (컴포넌트에 스타일 직접 입히는 방식)

• CSS-in-JS라고 하는 JavaScript파일 안에서 CSS를 처리할 수 있게 하는 라이브러리
• class 이름 짓기에서 해방
• 컴포넌트에 스타일을 적기 때문에 간단하고 직관적
• 리액트는 컴포넌트를 만들고 조합하여 웹 페이지를 만드는데, 컴포넌트에 적용되는 CSS를 같은 페이지에 작성하기 때문에 리액트 스러운 스타일을 할 수 있음