import 와 export를 통해 여러 파일들을 갖기

import 부분

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
      <Button />
    </div>
  );
}
export default App;
	```

export 부분
```js
function Button({ text }) {
  return <button> {text}</button>;
}

export default Button;

파일에 css 적용하는 방법

app.js

import Button from "./Button";

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

##Button.js

import PropTypes from "prop-types";

function Button({ text }) {
  return (
    <button
      style={
        {
          //   backgroundColor:"tomato",
          //   color:"white", 이런식으로 하나하나 넣고 싶지도 않아!
        }
      }
    >
      {" "}
      {text}
    </button>
  );
}
//특정 컴포넌트를 위한 CSS파일을 만들 수 있는 기능을 얻었다.
// 두가지 옵션이 있다. 1. css 파일을 만들어서 button{} 작성해서 index.js에서 import 하는 방법
//하지만 원한다면 css를 import 하지 않을 수도 있다. 모든 버튼의 설정이 획일적으로 변하므로..
//다른 옵션으로는 2.style props를 사용하는 방법

Button.propTypes = {
  text: PropTypes.string.isRequired,
};
//서로 다른 파일들로 코드를 분할하는 등의 작업을 할 수 있게 되었다.

export default Button;

하지만 create-react-app의 장점을 못살린 방법들이다.

create-react-app으로 작업할 때의 포인트는 "분할하고" "정복하는" 것이다.

app.js

import Button from "./Button";

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

Button.js

import PropTypes from "prop-types";
import styles from "./Button.module.css";
//이렇게 styles을 import하여 className을 설정해 주면 된다.

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}
//이런 방식으로 하여 style들도 modular가 될 수 있다!
// 고로 이제 동일한 class 이름 btn을 다른 파일 내에서도 사용할 수 있다!!
Button.propTypes = {
  text: PropTypes.string.isRequired,
};
export default Button;

Button.module.css

/* Button.module.css 내에서 우리는 btn이라는 클래스를 만들 것이다. */

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

이런 방식으로 하여 style들도 modular가 될 수 있다!

고로 이제 동일한 class 이름 btn을 다른 파일 내에서도 사용할 수 있다!!

이것은 내내 다른 클래스 이름들을 사용하기 위해 기억하고 있어야만 하는 것보다, 훨씬 편리하다.

이제는 컴포넌트를 분리해서 만들 수 있고 그 컴포넌트를 위한 CSS를 만들 수 있고 독립적인 형태가 되는 것이다

continued...

다음 시간에는 ReactJS의 마지막 커다란 컨셉 하나를 배울 것이다.