[노마드 코더] React JS - Tour of CRA

prop-types 설치

npm i prop-types

사용

import PropTypes from "prop-types";

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

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

import 후 사용해주기

css 사용하기

src 폴더에 스타일 시트를 넣어줌

import "./styles.css"

js 파일에 import 해주기

style 직접적으로 넣기

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

모듈을 사용하여 css 적용하기

css 가 전역적으로 사용되는 문제
-> 모듈별로 사용하자

버튼에만 적용하고 싶은
Button.module.css 생성

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;

• 적용하고 싶은 js에만 import해줌
• CRA는 css 코드를 js object로 변환시켜줌
  
  무작위적인 랜덤 class를 갖게 됨

출처
: ReactJS로 영화 웹 서비스 만들기