styled-components와 일반 classNames를 사용하는 CSS/Sass를 비교했을 때, 가장 큰 장점은 props 값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있다는 것입니다.
노트 VS Code를 사용할 때 styled-components를 위해 컴포넌트 내부에 작성한 스타일이 그저 문자열로 간주되어 코드 신택스 하이라이팅(문법에 따라 에디터 폰트 색상을 입히는 작업)이 제대로 이루어지지 않습니다.
VS Code의 마켓플레이스에서 vscode-styled-components를 검색하여 설치하면 색상이 정상적으로 입혀집니다.
▲ 그림 9-8 vs-code-styled-components
아직은 styled-components가 어떤 원리로 어떻게 작동하는지 잘 모르겠지요? 앞으로 이어지는 절에서 원리와 사용법을 하나하나 알아봅시다.