#1. Styled-component

Styled-component 의 장점

• Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다.
• 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.
• 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다.

Styled-component는 CSS-in-JS는 스타일 기법 중의 하나로 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

기존에는 html에서 class 를 지정해 준 뒤, 그에 따라 변화되는 Action들에 의해 class를 바인딩해주는 구조로 되어있다. 그렇기 때문에, 동일한 디자인을 사용하는 여러개에서 액션을 줄 때는, 각각의 컴포넌트 별로 스타일을 지정해주어야 한다.(특히 position) 그러나, Styled-component를 사용하게되면, 이러한 번거로움이 줄어들게 되는 장점이 있다. css컴포넌트에서 변수까지 지정해 주어 해결할 수 있게 된다.

그러나, 두 가지 문법으로 모두 능숙하게 사용할 수 있는 사람에게도 적응하는데 시간이 걸리는 기법으로, 처음 시작하는 사람들의 진입장벽이 높을 수 있다.또한, 번들을 사용하기 때문에 액션 자체가 무거워질 수 있다.