[react] 스타일링 설정하기

Sass 사용하기

Sass 는 .sass 확장자와 .scss 확장자를 지원합니다.

보통 .scss 확장자를 사용합니다.

yarn add node-sass

이 라이브러리는 Sass 를 css로 변환해줍니다.

 

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

create-react-app 으로 만든 프로젝트는 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져 있습니다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject 명령어를 통해 세부 설정을 밖으로 꺼내 주어야 합니다. (commit 한후)

yarn eject

webpack.config.js 에서 "sassRegex" 두번째 탐색결과에서 use 부분을 아래와 같이 수정합니다.

{
  test: sassRegex,
  exclude: sassModuleRegex,
  use: getStylesLoaders({
    importLoaders: 2,
    sourceMap: isEnvProduction && shouldUseSourceMap
+  }).concat({
+    loader: require.resolve('sass-loader'),
+    options: {
+      sassOptions: {
+        includePaths: [paths.appSrc + '/styles']
+      },
+      sourceMap: isEnvProduction && shouldUseSourceMap,
+      prependData: `@import 'utils';`
+    }
  }),
  sideEffects: true
}

서버를 재시작하면 scss 파일에서 utils.scss를 자동으로 불러오게 됩니다. 이제 .sass 맨 윗줄에 있는 import 구문을 지워도 정상적으로 작동할것 입니다.

node_modules에서 라이브러리 불러오기

yarn 이나 npm 으로 다운받은경우 node_modules 에 다운이 되는데

@import '../../../node_modules/library/styles';

이런식으로 작성하면 너무 길다. 단순히 아래와 같이 하면 됩니다.

@import '~library/styles';

 

CSS Module 사용하기

해당 스타일 클래스가 전역이 아닌 불러온 컴포넌트에만 적용되게 하는 방법입니다.

create-react-app v2 버전 이상부터는 별도의 설정없이 사용할수 있습니다.

import React from 'react'
import styles from './CSSModule.module.css';
const CSSModule = () => {
	return (
    	<div className={styles.wrapper}>
        	안녕하세요!
        </div> 
    );
}

 console.log(styles) 를 찍게된다면, 다음과 같은 결과가 나타납니다.

{ wrapper: "CSSModule_wrapper_15dbQsSS" }

컴포넌트이름_클래스이름_해쉬  니깐 다른것과 곂칠수가 없습니다. 

즉, 저는 class 이름을 wrapper 라고 한것 이고 css 적용할때도 .wrapper { background: black;} 이런식으로 적용하면 됩니다. 

classnames 사용하기

yarn add classnames

우선 설치를 합니다.

이걸 사용하면 조건부로 스타일링 하기 편합니다.

사용법

import classNames from 'classnames';

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

예제

const MyComponent = ({ highlighted, theme }) => {
	<div className={`MyComponent ${theme} ${highlighted ? 'highlighted': '')`}>
    Hello
    </div>
});

근데 자세히 보면 MyComponent 이름이 똑같이 사용되는데 이부분을 간단히 하기위해 .bind 함수를 사용하게 되면 쉽게 사용할수 있습니다.

import classNames from 'classnames/bind'
import styles from '/CSSModule.module.css';

const cs classNames.bind(styles);