nomad code_react js로 영화앱 만들기_#5.1

# prop-types

인자의 타입값을 정하는 prop-types는 라이브러리로 따로 빠졌다고 하기 때문에 설치를 진행해야 한다.

npm i prop-types

터미널에 위의 명령어를 입력한다.

powershell에 입력할 경우 오류가 뜨며 설치가 안될 수 있으니 bash로 바꾼 뒤 설치하는 것을 추천한다.

혹시라도 안될 경우 아래 방법으로 해보는 것도 추천

npm install --global yarn
yarn add prop-types

# react  CSS

외부 css파일을 생성하여 import하는 방법

*Button.module.css 

.title {color: #fff; background: tomato;}

*App.module.css 

.title {font-size:18px;}

*App.js 

import Button from "./Button";
import styles from "./App.modules.css";

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

export default App;

*Button.js 

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

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

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

export default Button;

• 각각의 모듈화된 css파일을 만들고 싶다면 파일명.module.css로 css파일을 생성한 뒤 원하는 컴포넌트에 import시키면 된다.
• 모듈화 된 css는 다른 파일에 같은 선택자가 있어도 별개로 적용된다.
• className을 붙일 때는 styles.클래스명 으로 작성하면 된다.

* 결과 

*App.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>
);