🎨 리액트 스타일링

대표적으로 3가지를 꼽을 수 있다.

1. CSS Module

CSS클래스가 중첩되는 것을 완벽하게 방지할 수 있다.
파일의 확장자명은 .module.css
Box.module.css

.Box {
  background-color: #000;
  color: #fff;
}

Box.js

import React from 'react';
import styles from './Box.module.css';
export default function Box () {
  return <div className={styles.Box}>{styles.Box}</div>;
}

• 기본

className={ styles.{ class명 } }

• 클래스에 - 하이픈이 들어갔을 때

className={styles["header-wrap"]}

• 클래스가 두개 이상일 때

className={`${styles.wrap} ${styles.btn}`}

• css 클래스를 조건부로 설정할 때 쓸 수 있는 라이브러리

//터미널 명령
npm install --save classnames

// import 시켜주기
import classNames from 'classNames/bind';

styles.클래스명 으로 할 필요없이 cx('class1', 'class2') 형태로 사용가능

2. styled-components

// 터미널 명령
yarn add styled-components

App.js

import React from 'react';
import styled from 'styled-components';
const AppWrap = styled.div`
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: pink;
`;
function App () {
  return (
    <AppWrap>
      <div>
        <h1>Hello World</h1>
      </div>
    </AppWrap>
  );
}

3. Sass(Syntacically Awesome Style Sheets)

코드의 가독성을 높이며 유지보수를 쉽게 해준다.
참고링크
node-sass 라이브러리 설치

$ yarn add node-sass

예시)

$font-stack: Helvtica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color