[React] 리액트에서 CSS 스타일 적용하는 3가지 방법

이번에는 리액트에서 CSS 스타일을 적용시키는 방법들을 알아보려고 한다.
하나씩 살펴보자.

00. 사전준비

./component/Hello.js

export default function(){
    return <div>hello component</div>
}

먼저 CSS 스타일을 적용시킬 컴포넌트를 정의해준다.

App.js

import logo from './logo.svg';
import './App.css';

import Hello from './component/Hello'

function App() {
  return (
    <>
      <Hello/>
    </>
  );
}

export default App;

이후 해당 컴포넌트를 App Component에 추가해준다.

스타일이 적용되지 않은 Hello 컴포넌트

01. In-line 방식으로 적용하기

먼저 태그 안에 직접적으로 CSS 스타일을 명시하는 방식이다.

export default function(){
    return <div style={{
        width:'100px',
        height:'100px',
        backgroundColor:'red'
    }}>
        hello component
    </div>
}

• css 내용을 객체로 매핑하여 적용시킨다.
• 두 단어 이상의 이름을 가지는 속성은 카멜 케이스(낙타체) 형태로 작성한다.

const cssStyle = {
    width:'100px',
    height:'100px',
    backgroundColor:'red'
}

export default function(){
    return <div style={cssStyle}>
        hello component
    </div>
}

물론 위처럼 스타일 객체를 따로 변수로 빼서 작성하는 것도 가능하다.

02. 별도의 css 파일 생성 및 적용하기

./component/Hello.css

.box{
    width: 100px;
    height: 100px;
    background-color: red;
}

먼저 외부에 CSS 파일을 따로 작성 후

./component/Hello.js

import './Hello.css'

export default function(){
    return <div className='box'>
        hello component
    </div>
}

위 처럼 임포트 하여 해당 CSS 스타일을 적용시킬 수 있다.

문제점

그러나 여기에는 문제가 하나 있다.
여러개의 css 파일이 존재할 때 각 css 파일에서 동일한 이름의 속성명을 가질 경우, React가 페이지를 로드할 때, 각 속성들이 동일한 이름으로 함께 로드된다.
그래서 내가 의도하지 않은 CSS 스타일이 적용될 가능성이 있다.

Hello2.css 파일을 만들고, 적용시켜서 확인해보자

./component/Hello2.css

.box{
    width: 500px;
    height: 500px;
    background-color: blacka;
}

./component/Hello2.js

import './Hello2.css'

export default function(){
    return <div className='box'>
        hello component2
    </div>
}

App.js

import logo from './logo.svg';
import './App.css';

import Hello from './component/Hello'
import Hello2 from './component/Hello2'

function App() {
  return (
    <>
      <Hello/>
      <Hello2/>
    </>
  );
}

export default App;

실행 결과

분명 각 컴포넌트에는 서로 다른 CSS 스타일을 적용시켰는데, 실행 결과에서는 두 컴포넌트가 똑같은 스타일이 적용되어있는 것을 볼 수 있다.
왜 이런 문제가 발생할까?

개발자 모드로 실제 로드된 style 태그를 확인해 보자

보면 우리가 정의한 각각의 css 파일이 모두 같은 이름으로 로드되어있는 것을 볼 수 있다.
때문에 컴포넌트에서 어느 style을 적용할지 구별하지 못하고, 하나의 style만 적용시킨 결과가 나타난 것이다.

이런 문제가 발생하기 때문에 해당 방식에서는 css의 속성명을 심사숙고해서 정해야한다.

03. CSS Module을 사용하여, 컴포넌트별로 CSS 적용하기

위의 문제를 해결하기 위해, CSS Module을 사용하여 컴포넌트별로 css를 적용시킬 수 있다.

사용법은 아래와 같다.

• css의 파일 명을 파일이름.module.css 으로 바꾼다.
• 해당 css를 적용시킬 컴포넌트가 있는 js 파일에서 module.css 파일을 임포트한다. 이때 임포트 이름을 정의한다.
• 컴포넌트의 아이디나 클래스명을 {변수명.속성명} 꼴로 정의한다.

코드로 보자

Hello.module.css

.box{
    width: 100px;
    height: 100px;
    background-color: red;
}

Hello2.module.css

.box{
    width: 200px;
    height: 200px;
    background-color: black;
}

Hello.js

import s from './Hello.module.css'

export default function(){
    return <div className={s.box}>
        hello component1
    </div>
}

Hello2.js

import s from './Hello2.module.css'

export default function(){
    return <div className={s.box}>
        hello component2
    </div>
}

실행 결과

실행 결과를 보면 각 컴포넌트의 속성이 잘 적용된 것을 볼 수 있다.