React App 만들기(2) - Button 컴포넌트 만들기

😎 이전게시글

2023.03.08 - [개발/React] - React App 만들기(1) - 프로젝트 생성

 

1.  Button 컴포넌트 생성

src 폴더 하위에 text를 props로 가지는 Button.js 파일을 생성한다.

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

// App.js에서 import 하기위해 해당 코드를 추가한다.
export default Button;

 

Button 컴포넌트를 App.js에 import한다. 컴포넌트는 무조건 대문자로 시작해야 한다!

import Button from "./Button";

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

export default App;

 

2. Props 타입 설정하기

prop-types 모듈을 설치한다.

> npm i prop-types

 

Button 컴포넌트에 type을 추가한다.

// 추가
import PropTypes from "prop-types";

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

// 추가
Button.propTypes = {
    text: PropTypes.string.isRequired
}

export default Button;

 

3. 스타일 지정하기

3-1. 전역으로 스타일 생성

src 폴더 하위에 styles.css 파일을 생성한다.

button {
    color: white;
    background-color: tomato;
}

 

App.js에 해당 css파일을 import한다.

import Button from "./Button";
// 추가
import "./styles.css"; 

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

export default App;

css가 적용되었다!

하지만 이렇게 하면 모든 버튼에 똑같은 css가 적용된다.

 

3-2) Button 컴포넌트에 직접 스타일 생성

function Button({text}) {
    return (
        <button style={{
            backgroundColor:"tomato",
            color:"white"
        }}>{text}</button>
    )
}

코드가 지저분해진다..

 

3-3) CSS Module 생성

CSS Module이란 CSS를 사용할때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술이다.

src 폴더 하위에 Button.module.css 파일을 생성한다.

{클래스명}.module.css 파일명을 사용하여 module을 생성한다.

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

 

Button 컴포넌트에 Button.module.css을 import한다.

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

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

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

클래스명이 랜덤하게 생성되었다!

 

 

+

 

여러개의 클래스를 적용할 때는 백틱(`)을 사용한다.

<button className={`${styles.btn} ${styles.btn2}`}>{text}</button>

 

 

 

 

참고)

https://react.vlpt.us/styling/02-css-module.html

2. CSS Module · GitBook