[React] Component에 스타일 추가하기

 

[React] React 시작하기

지난 포스팅에 이어 버튼 컴포넌트를 추가하여 버튼 스타일을 추가해보자. 

우선, create-react-app으로 생성된 src 디렉터리 밑에 버튼 컴포넌트 파일을 생성한다.

 

Button.js

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

 

App.js파일에서 생성된 Button컴포넌트를 import하고 사용한다.

App.js

import Button from "./Button"

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

export default App;

 

Prop-types 사용하기

Prop-types 사용을 위해 터미널에서 설치

 npm i prop-types

Button.js에서 import 후 사용

import PropTypes from "prop-types";

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

 

src 폴더 아래 style.css파일 생성

style.css

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

index.js 파일에서 import하기

index.js

import "./style.css";

=> 하지만 이 방법은 애플리케이션에 사용되는 모든 버튼의 스타일을 동일하게 하기 때문에 권장 X, CSS 모듈 사용

 

다시 index.js 파일에서 import 한 sytle.css를 지우고 style.css 이름 변경 -> Button.modules.js

코드를 다음과 같이 수정

Button.modules.js

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

Button.js 파일에서 import

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

create-react-app은 css 코드를 javascript 오브젝트로 변환하여 다음과 같이 style을 사용할 수 있다.

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

결과 이미지

 

 

title에 style 추가해보기

위와 동일한 방법으로 App.modlue.css 파일을 생성한다. 이름은 상관없이 이름 뒤 .modlue.css을 붙여주면 된다.

 

App.modlue.css

.title{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
}

App.js파일에서 import후 사용

App.js

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

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

export default App;

결과 이미지

타이틀의 스타일이 미세하게 변화된 것을 확인할 수 있다.

 

 

create-react-app은 html 내에서 class 이름을 랜덤 하게 생성한다.

따라서, 컴포넌트를 분리해서 만들 수 있고 각 컴포넌트를 위한 css를 만들 수 있다.