Creat React App로 CSS적용시키는방법

1. css 파일 하나를 생성해서 웹페이지 전체에 적용시키는 방법 (global css)라고도 한다.

단점 : 하나의 파일에 너무 많은 코드가 들어감.

2. 버튼 컴포넌트에 prop형식으로 style을 적용시켜준다.

단점 : 버튼 하나하나 특색있게 만들고 싶으면 여러개의 컴포넌트를 만들어야함.

3. modules css를 사용한다.

이거 말하려고 1, 2번 나열한거임 ㅎ
css 적용시킬때 index.js에 import해주면 웹페이지 전역에 css적용이 된다. 하지만 Create - react -app에서는 절대 용납몬해. "분할"해서 블록형식으로 적용시켜야 최적화 할 수 있기때문.

사용방법은..
Button.module.css파일 하나를 src폴더에 생성하고 페이지 전역인 index.js에 import하지 않고, Button.js파일에만 import시켜준다. import styles from "/.Button.module.css"

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;

이렇게 해주면 Button 컴포넌트에 className을 적용시킬 수 있다. className={styles.btn}
Create-React-App에서 css를 js object로 넘겨주는거임. 익스큐즈뭬~?

브라우저 개발자도구 열어서 html을 확인하면 버튼에 렌덤으로 className이 보여된게 보임..
이 말은 즉!! 스타일도 모듈러(modules)가 될 수 있다는 뜻. 즉!! .btn의 스타일을 import만 해주면 다른파일에서도 적용가능하다. 와ㅏㅏㅏㅏ우!!