[React] styled-components

Styled-components

• .css 파일을 사용하지 않고 .js 파일 내에서 html요소에 스타일을 적용하기 위해 사용
• 기존의 .css 파일에서 스타일을 적용하지 않고 각 .js 파일에서 적용하기 때문에, class명이 겹치는 경우 스타일 적용이 중복으로 이뤄지지 않는다.

---

1. 설치

npm install styled-components

 

2. 사용

 

• Line 6
  - styled-components 임포트하기
• Line 8
  - styled라는 이름으로 임포트한 styled-components를 이용하여 스타일이 적용된 컴포넌트 ‘Box’ 생성하기
• Line 19
  - 위에서 만들어진 스타일이 적용된 ‘Box’ 컴포넌트사용

---

일반 css 파일의 적용 범위 한정하기 (모듈화)

• .css 파일의 이름을 [컴포넌트명.module.css] 로 작명하기
  - 컴포넌트명.js 파일에만 위 파일의 스타일이 적용된다.

---

props를 활용하여 스타일 지정하기

 

• Line 1
  - styled-components 임포트
• Line 3
  - styled-components 선언
• Line 4
  - 해당 컴포넌트에 전달되는 props 값을 이용하여 배경색 지정하기
• Line 12 ~ 13
  - 스타일된 컴포넌트에 bg 라는 이름으로 색을 props로 전달

---

단점

1. js 파일이 복잡해짐
2. js 파일 간 중복된 디자인이 많을 때, 하나의 디자인을 import해서 사용해야함