리액트를 다루는 기술 9장

Sass

• Css 전처리기
• 복작합 작업을 쉽게 할 수 있도록 해 줌
• 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해줌
• 두 가지 확장자 .scss와 .sass를 지원

.sass	.scss
중괄호와 세미콜론 사용하지 않음	중괄호와 세미콜론 사용함 기존 CSS 문법과 크게 다르지 않음

*node sass version 5.0.0 is incompatible with ^4.0.0 오류 뜰 때*

   $ npm uninstall node-sass

   $ npm install node-sass@4.14.1

   $ yarn start

   후 정상작동함node sass version 5.0.0 is incompatible with ^4.0.0.

   [출처] [React] Error: node sass version 5.0.0 is incompatible with ^4.0.0. 뜰 때|작성자 밍디

 

classnames

: CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리

yarn add classnames를 통해 설치

import classNames from 'classnames';

classNames('one','two'); // = 'one two'
classNames('one', {two: true}); // = 'one two'
classNames('one', {two: false}); // = 'one'
classNames('one',['two', 'three']); // = 'one two three'

const myClass = 'hello';
classNames('one', myClass, {myCondition: true}); // = 'one hello myCondition'

 

props

const MyComponent = ({highlighted, theme}) => (
    <div className={classNames('MyComponent', {highlighted}, theme)}>Hello</div>
);