[React] 동일한 css 속성을 다른 파일 내에서 사용하기

학습일 : 2023. 03. 16

---

css 적용을 하며 같은 class 중복문제와

또 그걸 피하기 위해

다른 이름의 class 를 주고

같은 코드를 그대로 긁어 와서 사용했던

아주 비효율적이고 찝찝했던 지난날의 무거운 고민을 

드디어 해결할 시간이 왔다.

 

 

가장 먼저, 준비되어야 할 파일은

1. Button.module.css

2. Button.js

3. index.js

4. App.js

 

준비가 되었다면 시작

 

---

<Button.module.css>

btn 클래스에 적용될 css를 작성해준다.

/* btn 클래스 만들기 */
/*create-react-app은 이 CSS 코드를 js 오브젝트로 변환시켜주게 된다. */
.btn {
    color:rgb(255, 255, 255);
    background-color: rgb(21, 102, 75);
}

 

<Button.js>

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

를 상단에 작성하여 css파일을 import 해준다.

그런 다음 <button> 태그 안에 className 을 부여해준다.

작성방법은

<button className={styles.btn}>...</button>

이런식으로 작성해주면 된다.

import PropTypes from "prop-types"; // import 해주면 밑에서 쓸 수 있다.
import styles from "./Button.module.css";

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>; // className 부여(랜덤으로 생성됨)

}

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

export default Button;

 

className을 styles.btn으로 주었기 때문에

개발자도구상으로 보면

 class 이름이 랜덤으로 생성되어 중복이 되지 않는 편리함이 있다.

 

 

 

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

 

 

<App.js>

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>Welcome back!!!!</h1>
      <Button text={"Continue"} />
    </div>
  );
}

export default App;

 

 

 

실행결과