Tour of CRA

 

1. Buttons.js 및 css 생성하기

- Button.js

import PropTypes from "prop-types";

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

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

//App.js 에서 Button 을 가져올 수 있도록
export default Button;

 

- styles.css

button {
  color: white;
  background-color: tomato;
}

 

- App.js

import Button from "./Button";

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

export default App;

 

2. css파일을 분할하고 정복하기

- styles.css 파일 명을 Button.module.css로 변경 및 코드 수정, index.js에서 import 되어있던 css 삭제 

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

 

- Button.js에 import 시키기

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,
};

//App.js 에서 Button 을 가져올 수 있도록
export default Button;

→ 동일한 class 이름을 다른 파일 내에서도 사용이 가능

개발자 환경에서 볼 때에는 랜덤하게 보이는 클래스 이름을 만들어 보여주게 된다.

 

 

3. App.css 파일 만들어보기

- App.module.css

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

- 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;

- 같은 클래스 이름을 사용한다고 하더라도 자동으로 랜덤이름으로 바뀌게 된다.