(TIL 17일차) React (7)

pks787·2020년 2월 13일
0

TIL(Today I Learned)

목록 보기
11/27

Sass(Syntactically Awesome Style Sheets)

  • CSS-pre-processor(전처리기)
  • 복잡한 작업을 쉽게 해주고, 코드의 재활용성 및 가독성을 높여 유지보수에 유리하게 해줌
  • 보통 언급되는 전처리기 3대장으로 Less, Sass(SCSS), Stylus 존재
  • 문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능
  • 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭

Scss vs Sass

  • 보통 Sass를 많이 사용하기에 Sass 방식을 채택해서 사용

Sass 사용법

  1. node-sass 라이브러리 설치
  • 이 라이브러리리는 Sass를 css로 변환해주는 역할
  1. Button 컴포넌트 만들기
  1. scss 적용하기

Scss 특징

& 연산자

반복되는 작업 mixin


CSS Module

  • 컴포넌트 스타일링 할 시 CSS 클래스 중첩되는 것을 방지

예시

  • 리액트 컴포넌트 파일에서 해당 CSS파일 불러올 때 CSS 파일에 선언한 클래스 이름은 모두 고유
  • CSS 클래스 이름이 만들어지는 과정에서는 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용 가능
  • 클래스 이름에 대해 고유한 값을 만들었기에 다른 곳에서 같은 클래스명 중복에 대해 걱정 X
    2

CSS 클래스 네이밍 규칙(하기 싫으면 CSS MOdule 사용)

  1. 컴포넌트 이름은 유니크하게 작성
  2. 컴포넌트 최상단 클래스는 컴포넌트 이름과 일치와 일치
  3. 컴포넌트 내부 CSS 클래스는 CSS Selector 사용 (Ex: .MyForm .my-input)

CSS Module 실전 (라이브러리 필요 X)

시작하기 전 Tip

react-icons문서 참고!!

  1. CheckBox.module.css 작성
  1. CSS Module 사용할 컴포넌트에 import

⭐styled-components⭐

  • JS 안에 CSS 작성가능하게 해주는 최고의 라이브러리❗
  • 대안으로 emotion과 styled-jsx

styled-components 사용법

  • 스타일을 가진 컴포넌트 생성 가능
  • ThemeProvide를 이용하여 styled-components 로 만든 컴포넌트에서 palette 를 조회하여 사용
  • ThemeProvider 로 설정한 값은 styled-components 에서 props.theme 로 조회
  • CSS 코드를 조건부로 보여주고 싶으면 CSS import하고 사용해야 함

profile
Front End. Dep

0개의 댓글