시작하며..

react에서 module별로 스타일을 정의하는 방법을 정리하였다. 노마드코더 사이트의 리액트 무료강의 내용임을 밝힌다. 노마드코더 의 무료 강의 중 "ReactJS로 영화 웹 서비스 만들기"의 "#5.1 Tour of CRA"의 내용 중 일부 이며 자세한 것은 무료강의 이므로 등록해서 볼 수 있다.

css파일 만들기

구별하기 편하게 모듈 이름을 이용해서 적용하고자 하는 모듈의 css 파일을 만든다. Button 이라는 모듈의 css를 만들기 위해서, "Button.module.css"라고 만들었다. 그리고 이 파일에 필요한 css를 만드는 데 클래스 이름을 지정하는 방법을 사용한다. 예) .btn

.btn {
    color: white;
    background-color: tomato;
}

모듈에 적용하기

모듈 맨 위에, imprt을 이용해서 styles로 위에 만들었던 css파일을 가져 온다.

import styles from "./Button.module.css";

return 되는 html 에 className을 적용하고 값은 styles.btn으로 한다.

function Button({text}) {
    return <button className={styles.btn}>{text}</button>
}

결과

결과 화면

다음과 같이 Button component에 css가 적용 된 것을 볼 수 있다. (토마토 색 배경에 흰글씨 버튼)

개발자 도구

이 때, 개발자 도구로 button을 보면 class가 random하게 적용되어 진 것을 볼 수 있다.

전체코드

App.js

import Button from "./Button"
import styles from "./App.module.css"

function App() {
  return (
    <div>
      <h1 className={styles.title}>Hello Again!!</h1>
      <Button text={"Continue"}/>
    </div>
  );
}

export default App;

Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";

function Button({text}) {
    return <button className={styles.btn}>{text}</button>
}

Button.propTypes = {
    text: PropTypes.string.isRequired,
}
export default Button;

Button.module.css

.btn {
    color: white;
    background-color: tomato;
}