리액트2 - 스타일

https://styled-components.com/

styled-components

 

Styled-components의 주요 특징

1. CSS-in-JS: 스타일을 JavaScript 파일 내에 작성할 수 있습니다.
2. Scoped Styles: 스타일이 해당 컴포넌트에만 적용되어 다른 컴포넌트와 충돌하지 않습니다.
3. Dynamic Styling: 컴포넌트의 props를 사용하여 동적으로 스타일을 변경할 수 있습니다.
4. Theming: 테마를 쉽게 관리할 수 있습니다.

 

---

1. 내부에 디자인 설정

 

단점 : 자바스크립트로 작성하기 때문에 자동완성 안됨

 

2. 외부에 디자인 설정

 

 

- 자동완성 가능

- 재사용 가능

 

단점 : 동적으로 변경 어려움,

 

 

3.  styled-components

 

 

자바스크립트 파일에서 css 문법으로 스타일 작성 가능