styled-components ?

styled-components를 쓰면 어떤 점이 좋을까

• CSS를 컴포넌트화 하기 때문에 스타일시트의 파일 유지보수가 필요없다.
• CSS-in-Js으로 JavaScript 환경을 최대한 활용할 수 있다.
• JavaScript와 CSS 간의 상수와 함수를 쉽게 공유할 수 있다. → props를 활용한 조건부 스타일링
• 현재 사용중인 스타일만 DOM에 포함된다.
• CSS-in-JS는 클래스를 자동 생성해주기 때문에 코드가 경량화된다.

단점은

• 인터랙션한 페이지의 경우 성능적인 부분에서 좋지 않다.
• 별도의 라이브러리를 설치해야하기 때문에 번들 크기가 커진다.

<aside> 💡 작업자의 취향마다 다르겠지만

• 효율성과 컴포넌트 위주의 프로젝트라면 css-in-js(styled-components)
• 사용자의 편의에 중점을 둔 인터렉티브 웹, 디자인 웹 프로젝트라면 css-in-css(SCSS) 를 추천합니다!

</aside>

styled-components는 css-in-js에서 가장 높은 사용량과 인지도를 가지고 있습니다!

실행 과정

1. 원본 코드 vscode에서 파일 열기

2. npm install 로 노드모듈 설치

3. npm install [email protected] (저는 이렇게 사용 중이지만 교안에 있는 버전도 상관없습니다)

   → 버전 설정 안하면 설치가 되지 않는 이슈가 있어요

4. npm i styled-reset 리셋 css 설치

   ⇒ 3, 4 과정 후 package.json에서 설치 확인 할 수 있습니다

5. npm start

기본 문법