styled-components란

CSS-in-JS 형식으로,
기존 돔을 만드는 방식인 css 파일을 밖에 두어 태그나 id, class이름으로 가져와 쓰지 않고,
동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 지정하는 것을 styled-components라고 부릅니다.

css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.
유지보수 편의성을 향상 시킵니다.

그러나, 별도의 라이브러리를 설치해야 하므로, 번들 크기가 커지고,인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보이는 단점이 있습니다.

패키지 설치

# with npm
npm install --save styled-components