리액트를 다루는 기술 개정판 [컴포넌트 스타일링]

9. 컴포넌트 스타일링

  . 스타일링 방식 

    . 일반 CSS

    . Sass: 자주 사용되는 CSS 전처리기 (쉽게 코드 작성 가능)

    . CSS Module: CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 고유한 이름을 자동으로 생성해주는 옵션 

    . styled-components: 스타일을 js 파일에 내장시키는 방식 (스타일 작성과 동시에 스타일이 적용된 컴포넌트를 만듦)

 

  . 일반 CSS

    . CSS 작성시 가장 중요한 점은 중복되지 않게 만드는 것 (CSS Selector 활용 가능)

    . 이름 규칙: 컴포넌트 이름-클래스 형태 (App-header)

    . CSS Selector: CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있다. 

 

  . Sass 사용하기 

    . Syntactically Awesome Style Sheets: CSS 전처리기로 복잡한 작업을 쉽게 해주고, 코드 재활용성, 가독성을 높여준다.

    . .sass vs .scss : .sass 확장자는 중괄호와 세미콜론을 사용하지 않는다. (.scss 문법이 더 자주 사용된다)

    . node-sass 라이브러리 설치 필요 (yarn add node-sass): Sass를 CSS로 변환해준다.

    . utils 함수 분리: src/styles/utils.scss

    . 유용한 Sass 라이브러리: include-media, open-color (yarn add open-color include-media)

      . include-media: 반응형 디자인을 쉽게 만들어 준다.

      . open-color: 매우 편리한 색상 팔레트 

    . node_modules 내부 라이브러리를 불러올 때는 앞에 물결(~)만 붙여줘도 된다.

 

  . CSS Module

    . CSS Class 이름을 고유한 값(파일이름_클래스이름_해시값) 형태로 자동으로 만들어서 중첩을 방지하는 기술 

    . v2 버전 이상부터는 .module.css 확장자로 파일을 저장하기만 하면 바로 적용된다.

    . ES6 문법 템플릿 리터럴: `(백틱) 활용. ex) const message = `My name is ${name}.`;

    . 리터럴 쓰기 싫다면: [a, b].join(' ')

    . classnames: CSS 클래스를 조건부로 설정할 때, 여러 클래스를 적용할 때 매우 편리한 라이브러리

     일반 .css/.scss 파일에서도 :local을 사용하면 CSS Module을 사용할 수 있다.

 

  . styled-components

    . JS  파일 안에 스타일을 선언하는 방식 (CSS-in-JS)

    . 라이브러리 종류: https://github.com/MicheleBertoli/css-in-js

MicheleBertoli/css-in-js

    . styled-components는 개발자들이 가장 선호하는 라이브러리 (emotions도 대체 가능)

    . .css / .scss 확장자를 가진 스타일 파일을 따로 만들지 않아도 된다는 큰 이점이 있다.

    . vscode-styled-components를 설치해야만 코드 색상이 정상적으로 입혀진다.

    . Tagged 템플릿 리터럴: `를 사용하여 만든 문자열에 스타일 정보를 넣어준다. props 값을 활용할 수 있다.

    . 조건부 스타일링시 props를 참조한다면, 반드시 CSS로 감싸 주어서 Tagged 템플릿 리터럴을 사용해야 한다.

 

  . 반응형 디자인

    . 브라우저의 가로 크기에 따라 다른 스타일을 적용하기 위해서는 media query를 사용한다.