Styled Components
대표적인 CSS-in-JS 방식으로 이러한 불편함을 해소하기 위해 등장한 방식이다.
• class, id 이름을 짓느라 고민한 적이 있다.
• CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다.
• CSS 파일이 너무 길어져서 파일을 쪼개서 관리해본 적이 있다.
• 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다.
이런식의 어려움을 해결하기 위해 CSS를 컴포넌트화 하여 문제점을 해결하는데 사용되는 라이브러리가 Styled Components이다.
Styled Components는 앞서 배운 CSS in JS 라는 개념이 대두되면서 나온 라이브러리인데. 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념이다.
CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발이 가능해진다. 이런 CSS in JS 라이브러리 중에서 현재 가장 대표적인라이브러리가 바로 Styled Components이다.
ㅇㅅㅇ