1. 기본 설명

아래 사이트에 간략하고 쉽게 잘 나와 있습니다.

CSS vs SASS vs styled Component - FE study13

간단히 요약하면

• css 방식은 App.js 파일이 있다면, App.css 파일을 만들어 css코드를 넣는 것
• sass 방식 또한 css와 비슷하게 App.scss 파일을 만들어 scss 문법에 맞게 코드 넣는것 인데
  Sass는 두가 확장자(.scss/.sass)를 지원한답니다. Sass가 첨 나왔을 땐 sass만 지원되었는데 보통은 scss 형식을 많이 쓴다고 합니다 (velopert 의견), npm install 작업 필요!
• styled-Component는 CSS-in-JS 방식이라 js 문법의 형식 안에 css를 집어넣습니다.

그래서 저는 이 방식이 편하던데 왜냐하면 파일을 2개 만들 필요가 없기 때문입니다. 프로젝트가 규모가 커지면 파일이 많아지는데 scss 파일하고, jsx(타입스크립트 사용하면 tsx) 파일이 생기면 2개씩 되니까 불편해서, 한 파일(jsx) 안에 스타일링 요소하고 다 있으면 작업하기 편하더라고요.

여긴 삼성 SDS에서 적은거라 더 깊고 잘나왔네요!!(늦게 발견해서 요약은 못하겠음 ㅠㅠ)

웹 컴포넌트 스타일링 관리: CSS-in-JS vs CSS-in-CSS

2. 각각 사용법

사용법은 조장님이 참고링크에 올려두신것처럼 velopert 블로그가 잘나와있습니다

2장. 리액트 컴포넌트 스타일링하기

참고

react 예제나 간단한 소스 조각 테스트 하시려면 아시는분은 아실테지만, 굳이 vscode 실행할 필요 없이
codeSandBox나

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

replit 사이트(웹IDE) 에서 돌리시는걸 추천합니다. 왠만한 소스는 다 preview도 지원해주고 잘돌아가고 좋아요.

(replit은 react 뿐만아니라 JS, c++, python 등 다양한 코드 돌릴때 좋음, 개인적으로 React는 codeSandbox JS나 그외 코드는 replit을 애용합니다ㅎ)

replit

3. 비교 (scss vs styledComponent)

현재 트렌드를 보면 최근 1년은 styledComponent가 더 인기 있습니다. Sass도 과거엔 인기가 엄청났네요

아래 블로그에 scss vs styled-componet 장단점을 잘 분석해놨는데 요약하기엔 내용이 어렵네요 ㅠㅠ

https://velog.io/@qksud14/portfolio-05

styled-components의 장점 을 간단하게 보자면 컴포넌트를 재사용하기 편하고, 아무래도 파일 2개 안만들어도 된다는점, 그리고 UI 라이브러리로 Material-Ui (유명함) 이 사용 가능합니다. 서버사이드 랜더링도 지원됩니다.

Sass의 장점은

딱히 못찾겠음 ;; Sass 방식이 좋다는 개발자 분들 포스팅도 조금 봐서 의견이 나뉘는듯. 근데 제 생각엔 styled-component가 더 우세한듯. 아마 컴포넌트 재사용 거의 안하는 프로젝트라면 scss 파일 하나에 수많은 컴포넌트 css 넣으면 더 가독성도 좋고 편하니까 좋은듯? 혹시 sass/scss 사용하시는 분중에 추가 장점 있으시면 의견 댓글 부탁드립니다!!

(심화) 많은, 다양한 react Styling사용법 알고 싶다면..(최신 geeks 자료)

https://www.geeksforgeeks.org/8-ways-to-style-react-components/