React #5. 리액트 컴포넌트와 CSS 모듈화의 장점

Button.js

// Button 컴포넌트를 정의합니다. 이 컴포넌트는 props로 'text'를 받아서 버튼에 표시합니다.
function Button({text}) {
    // JSX를 사용하여 버튼 요소를 반환합니다. 버튼 요소 안에 props로 전달된 'text'가 표시됩니다.
    return <button>{text}</button>;
}

// Button 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냅니다.
export default Button;

 

App.jks

import Button from "./Button";

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

export default App;

 

컴포넌트를 따른 js 파일로 분리해서 작성한것인데 아직은 왜 이렇게 구현했는지는 모르겠다. 강의를 더 따라가봐야 할거 같다. 서로 다른 코드를 다른 파일로 분할했다.

 

prop-types 도 설치해주자.

설치가 완료되면 자동완성 기능을 사용할 수 있다.

import PropTypes from "prop-types"

function Button({text}) {
    return <button>{text}</button>;
}

Button.protoTypes = {
    text: PropTypes.string
}

export default Button;

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import "./styles.css";

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

 

이제는 CSS 를 적용해볼건데 두가지 방법이 있다. 하나는 index.js 즉 최상위 부모 컴포넌트에 style.css 파일을 적용시키는 방법이다. 이 방법은 모든 컴포넌트에 적용되므로 특정 컴포넌트만 CSS 바꾸려고 한다면 번거롭다. CSS 가 두번 중복되어서 헷갈리기도 쉽다.

import PropTypes from "prop-types"

function Button({text}) {

    return <button style={{

        backgroundColor:"tomato",

        color:"white"

    }}>{text}</button>;

}

Button.protoTypes = {

    text: PropTypes.string.isRequired

}

export default Button;

 

자동 완성이 되긴 하지만 여전히 JS 문법을 따라해서 일일히 적어주는게 정말 힘들다..

 

리액트에서는 CSS 를 모듈화하여 사용할 수 있다. CSS 파일을 Button.module.css 하나 만들어주고 적용할 페이지에 import 해준 다음에 styles.btn 만 해주면 class 이름이 겹치지 않게 랜덤하게 정해지고 스타일이 적용된다.

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

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

Button.protoTypes = {
    text: PropTypes.string.isRequired
}

export default Button;

 

이런 방식은 아주 큰 장점을 개발자에게 가져다주는데 리액트가 클래스의 이름을 랜덤하게 부여되기 때문에 이름을 개발자가 기억할 필요가 없어진다. 그리고 모듈화 되어있어 유지보수하기 편해진다. 내가 버튼 하나의 색상을 변경하려면 기존에는 일일히 찾아내야했었다. 500~1000줄이나 되어서 하나 고치는데에 시간이 소모되는 불편함이 있었지만 따로따로 파일을 관리하기 때문에 CSS 파일에 들어가서 수정만 하면 된다.

 

이로써 컴포넌트는 아주 독립적인 형태를 가지게 되어 떼어다가 붙이기 좋고, 유지보수는 말할것도 없다!