React. create-react-app (prop-types / css 적용)

우선, 버튼에 해당하는 컴포넌트를 담은

Button.js를 만듬

 

>> 각각의 컴포넌트를 하나의 js파일로 따로 관리!

 

 

Button.js

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

export default Button;

 

App.js 수정

- import Button

- Button 사용

 

App.js

import Button from "./Button";

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

export default App;

 

vs코드 기능으로, 프로퍼티를 뭘 사용해야할지 확인하기 위해 prop을 보여줌.

이렇게 Button위에 마우스 올리고 있어도 됨 - prop 보여줌

 

 

 

 

** prop-types 패키지 설치

 

🔻 터미널창에 아래와 같이 입력

npm i prop-types

 

 

Button.js

import PropTypes from "prop-types";

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

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

export default Button;

PropTypes를 임포트한 후, 이전에 했던 대로 작성한다.

 

단, 이제는 각 요소를

Button.js, Input.js 등과 같이 separate해서 관리하고,

각각의 스타일도 따로 적용해줄 수 있다!

 

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./styles.css";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

index.js에 styles.css를 임포트하면

모든 것들에 적용이 된다.

 

그러나, 우리는 create-react-app을 이용하므로

이제 Button.js에서 import를 해서 분할해서 스타일을 적용할 수 있다.

 

 

 

---

Button.module.css

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

 

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;

import styles from "./Button.module.css" 로 임포트하고

class명을 부여하기위해 className 속성 사용.

>> styles.btn으로 지정한다.

 

 

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

위와 같은 CSS코드를 create-react-app syles라는 js object로 변환시켜준 것이다.

styles라는 오브젝트는 btn을 안에 갖고 있음.

 

class명이 랜덤하게 부여됨

자신의 스타일이 modular(모듈러)가 될 수 있는 것.

같은 클래스명(btn)을 다른 파일에서도 사용할 수 있으나,

브라우저에서는 클래스명을 랜덤으로 보여주는 것.

 

 

 

마찬가지로, App.js를 위한 css파일도 만들어 import 해보자.

 

App.module.css

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

 

참고로 파일명은 아무렇게나 해도 상관 ❌ 
.module.css 만 해주면 된다!

 

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;

 

 

이제는 다른 클래스명을 기억할 필요 x

(create-react-app이 랜덤하게 바꿔주기 때문)

 

만약,

App.module.css에서 클래스명으로 title을 사용하는데

Button.module.css에서도 클래스명을 title을 써도

전혀 문제될 것이 없다.

 

 

---

Ref. 

Free Lecture

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders