React에서 CSS 적용하는 다양한 방법

1. CSS 파일

CSS 파일을 별도로 작성 후 컴포넌트에서 해당 파일을 import하는 방식

 

로컬(VScode)

/* Color.css */
.myClass {
  color: blue;
}

// Color.jsx
import './Color.css';

function Color() {
  return <div className="myClass">Hello World</div>;
}

export default Color;

 

 

결과(Codepen.io)

See the Pen 2 by 유상현 (@ltfsrwdf-the-selector) on CodePen.

 

2. CSS 모듈

 

CSS 파일의 클래스명이 컴포넌트 범위 내에서만 유효하도록 하는 방식

 

로컬(VScode)

/* Color.module.css */
.myClass {
  color: green;
}

// Color.js
import styles from './Color.module.css';

function Color() {
  return <div className={styles.myClass}>Hello World</div>;
}

export default Color;

 

결과(CodeSandBox)

3. Styled Components 

JavaScript 파일 안에서 CSS를 작성하는 방법 (많이 사용되는 방식)

※ 아래에 해당 라이브러리 설치

 

설치 명령어

// npm
$ npm i styled-components

// yarn
$ yarn add styled-components

 

로컬(VScode)

// styled-components 라이브러리 불러오기
import styled from 'styled-components';

const MyDiv = styled.div`
  color: red;
`;

function Color() {
  return <MyDiv>Hello World</MyDiv>;
}

export default Color;

 

결과(Codepen.io)

See the Pen 3 by 유상현 (@ltfsrwdf-the-selector) on CodePen.

4. Inline Style

React에서 style 속성을 통해 인라인 스타일을 적용

 

로컬(VScode)

function Color() {
  return <div style={{ color: 'purple' }}>Hello World</div>;
}

export default Color;

 

결과(Codepen.io)

See the Pen Untitled by 유상현 (@ltfsrwdf-the-selector) on CodePen.

5. SCSS 

CSS 전처리기인 Sass를 사용하여 좀 더 복잡한 스타일링을 적용

※ node-sass 패키지를 설치

 

설치 명령어

// npm
npm install node-sass

// yarn
yarn add sass

 

로컬(VScode)

/* Color.scss */
$primary-color: blue;

.myClass {
  color: $primary-color;
}

// Color.js
import './Color.scss';

function Color() {
  return <div className="myClass">Hello World</div>;
}

export default Color;

 

결과(Codepen.io)

See the Pen 연습장 by 유상현 (@ltfsrwdf-the-selector) on CodePen.

 

기존에 HTML에서는 CSS효과를 주기 위해서 태그 안에 class로 넣었지만

React에서는 CSS효과를 주기 위해서는 태그 안에 class 대신 className으로 넣어준다.