[React 기초] 04. create-react-app

https://create-react-app.dev/

Create React App

실행하기 위해서는  NodeJS가 필요함

npx는 패키지 실행을 위한 도구로, 패키지의 최신버전 파일을 불러와 설치하여 실행시키고 실행된 이후에 해당 패키지를 제거하는 방식

npx create-react-app my-app

• my-app으로 파일 생성되고 안에 패키지가 설치됨
• package에 기본적인 명령어가 설정되어 있음
• 개발용 server를 열게됨

package.json에서 기본적으로 설정된 명령어를 scripts에서 확인 가능

살펴보기

index.js에서 App을 랜더링하고 있음
css를 import 할 수 있음

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./style.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js에서 컴포넌트를 불러옴

// App.js
import Button from "./Button";

function App() {
  return (
    <div>
      <h1>Wecome back!</h1>
      <Button text={"continue"} />
    </div>
  );
}

export default App;

각 컴포넌트를 사용할 시 export 해줘야 함

// Button.js
import PropTypes from "prop-types";

function Button({ text }) {
  return <button>{text}</button>;
}
Button.propTypes = {
  text: PropTypes.string.isRequired,
};

export default Button;

---

CSS 적용하기

1. 한 style.css 파일에 모든 내용 저장

2. 각각의 컴포넌트마다 style 지정

3. Divide & Conquer

 

각각의 컴포넌트마다 style 지정

import PropTypes from "prop-types";

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

export default Button;

Divide & Conquer

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

이렇게 할 경우, 실제 브라우저에서 해당 페이지가 랜더링 될 때, class 이름은 btn-xxxx 이런 식으로 무작위로 들어감.

다른 곳에서 같은 class 이름을 사용하여도 겹치지 않음!

위에서 JSX를 사용할 때, JS에서 class는 예약어라서 className으로 속성 값 부여

마찬가지로 for도 JSX 속성값으로 줄 경우, htmlFor로 사용