React에서의 스타일링 기법

CSS

일반 CSS를 통해 작성하여 스타일 파일을 작성하고 이를 컴포넌트 파일에서 불러와 적용한다.
스타일 적용시, 클래스 중복을 피하기 위해 기존 CSS Selector를 사용하거나 새로 클래스를 만들어 준다.

BEM 네이밍 규칙 참고

※ CSS Module: CSS를 컴포넌트 파일에서 불러와 적용할 때 [파일이름][클래스이름][해시값] 형태로 클래스 이름을 자동으로 만들어줘서 클래스 이름이 겹치는걸 막아준다.

SASS

CSS 전처리기로, 스타일 코드의 재사용을 높여주고 가독성을 높여준다. 변수 선언이 가능하고 계층 구조를 표현할 수 있다. if else같은 조건문이나 함수처럼 재사용할수 있다. CSS와 마찬가지로 스타일 파일을 따로 만들고 이를 컴포넌트 파일에서 불러 적용한다.

CSS-in-JS 라이브러리

자바스크립트 코드에서 CSS를 작성할 수 있게 해주는 라이브러리이다.

CSS-in-JS 라이브러리

styled-components

SASS 문법 지원, 서버사이드 렌더링해줌.

EmotionJS

번들 용량이 작고 styled-components보다 좀 더 가볍고 빠르다. styled-components랑 기능 거의 동일하게 사용 가능.

styled-components가 더 많이 사용되고 있으나 npm 다운로드 횟수는 emotionjs가 더 많다고 한다.
styled-components vs emotion

참고
https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8/lecture/76341?tab=note&mm=close
https://velog.io/@turtle601/REACT-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81-%EB%B0%A9%EB%B2%95
https://velog.io/@bepyan/styled-com