[React] CSS-in-JS

📁 CSS-in-JS

자바스크립트 코드에서 CSS를 작성하는 방식

CSS 스타일을 Component와 결합하여 모듈화, scope 지역화된 스타일 생성에 도움

 

• 장점
  • 지역 스코프 스타일
  • 코로케이션(colocation): 단일 컴포넌트에 관련된 모든 것을 같은 위치에 두는 것
  • 자바스크립트 변수를 style에 사용 가능
• 단점
  • 런타임 오버헤드
  • 번들 크기 증가
  • 지저분한 React DevTools

 

📁 Styled-Components

CSS 파일을 Component 내부에 넣기 때문에, CSS가 전역으로 중첩되지 않도록 만들어주는 장점

const 컴포넌트명 = styled.태그명`
... 스타일 넣기 ...
`

 

Styled-Components의 분리를 통해 중복 방지, 재사용성 증가 → 효율적인 사용 가능

내부적으로 props를 받을 수 있고, props에 따라 스타일 변경 가능