오늘은 컴포넌트 스타일링을 적어보겠습니다🔥

컴포넌트 스타일링

종류

1. 일반 CSS
2. Sass
   • 사용하려면 node-sass 라이브러리 설치
   • $ yarn add node-sass

   sass-loader 설정 커스터 마이징하기

   • 디렉터리 구조가 깊어질 때 유용
   • $ yarn eject 로 세부 설정 밖으로 꺼내기
   • concat() 으로 커스트 마이징
   • 절대 경로로 불러올 수 있음

   매번 똑같은 @import " " (을)를 적기 귀찮을 땐??

   • wabpack.config.js 에 sass-loader 의 data 필드 수정
     -> prependData : `@import 'utils';`

   '~' 기호 사용해서 Sass에서 라이브러리 사용하기

   • 자동으로 node_modules에서 라이브러리 디렉터리를 탐지해서 불러옴
3. CSS Module
   • 클래스 이름을 지을 때 그 고유성에 대해 고민하지 않아도 된다.
   • 특정 클래스가 전역적으로 사용된다면 :globar을 앞에 붙힘, 클래스 네임에 문자열을 넣어 주면 됨
   • 두 개 이상 클래스를 입력 시 템플릿 리터럴 사용
4. styled-components
   • CSS-in-JS 라이브러리 중 하나
   • 가장 큰 장점은 props 값으로 전달해 주는 값을 쉽게 스타일링에 적용할 수 있음

   조건부 스타일링

   • 여러 줄의 코드에서 props를 참조한다면 css를 불러 옴, css 로 감싸줘서 Taged 템플릿 리터럴을 사용

   반응형 디자인

   • 편하게 작업할 수 있게 utils 함수를 제공 함
   • media 를 모듈화하여 사용하면 편리 함