CSS Styling in React

React에서 styling 할 때, 일반적으로 별도의 파일에 style을 정의해놓고, React 컴포넌트 파일에서 해당 CSS 파일을 import하여 적용한다.

그 다음, 해당 Element에 className 속성을 이용해서 import된 CSS 파일에 정의된 스타일을 맵핑시켜준다.

이 때, CSS 파일은 각 컴포넌트에 대응하도록 개별적으로 추가할 수 있지만, 프로젝트 전체에 적용되는 것이기 때문에 선택자가 일치하는 경우 의도치 않게 다른 컴포넌트에도 스타일이 적용되는 문제가 발생할 수 있다.

이것은 프로젝트의 스타일 관리를 매우 어렵게 하므로 좋은 방식이라고 볼 수 없다.

CSS Styling의 전역화 오류

아래 예제는 Hello.jsx에서 가져와 적용한 스타일(Hello.scss)이 World.jsx에도 적용되는 것을 보여준다.

import './Hello.scss'

const Hello = () => {
  return <h1 className="title">Hello</h1>
}

export default Hello

.title {
  color: red;
}

const World = () => {
  return <h1 className="title">World</h1>
}

export default World

import Hello from '~/components/Hello'
import World from '~/components/World'

const App = () => {
  return (
    <>
      <Hello />
      <World />
    </>
  )
}

export default App

World 컴포넌트의 title class에도 의도하지 않은 스타일링이 전역적으로 적용되는 모습이다.

Style Hash를 통한 모듈화

프로젝트의 범위가 커지고, 계속해서 전역적 범위의 CSS 속성으로 인한 충돌이 발생한다면 가볍게 다룰 문제가 아니게 된다.

효율적으로 스타일을 관리하기 위해서는 실제 각 컴포넌트에 개별적으로 대응하는 스타일을 만들어야 한다.

이를 해결하기 위해 CSS의 모듈화가 필요한데, 이는 전역적으로 고유한 이름에 해시를 포함하여, 고유하게 선언된 모든 클래스를 만들어 모든 모듈에 대한 로컬 범위를 도입한다.

import styles from './Hello.module.scss'

const Hello = () => {
  return <h1 className={styles.title}>Hello</h1>
}

export default Hello

1. Hello.css 파일 이름을 Hello.module.css로 수정한 후 CSS 모듈을 가져온다.

2. 적용할 Element의 ClassName을 ClassName={styles.title} 와 같이 명명하여 클래스 선택자를 적용한다.

이 선택자는 해당 컴포넌트에서만 스타일의 유효범위(Scoped)를 가지며 스타일 해시(Style hash)를 통해 로컬화(고유한 값) 시킨다.

위와 같이 Hello.jsx의 클래스 선택자는 Style Hash가 붙어 고유한 값이 되어, 전역적으로 적용되지 않고, 의도한대로 Hello.jsx에만 적용이 되는 모습을 볼 수 있다!