React.JS) 2. Create React App 사용하기

1. Create React App(CRA)

• React 애플리케이션을 쉽게 설정하고 시작할 수 있도록 도와주는 도구

• 복잡한 설정 없이 기본적인 React 프로젝트 구조를 자동으로 생성해줌

• 기능
• 초기 설정 자동화: Babel, Webpack 등의 설정을 자동으로 구성
• 개발 서버 제공: npm start 명령어로 즉시 로컬 개발 서버 실행
• 최적화된 빌드: npm run build를 사용하여 배포에 적합한 정적 파일을 쉽게 생성
• 유효성 검사 및 테스트: Jest와 React Testing Library가 내장 → 쉽게 테스트를 작성, 실행
• 환경 변수 지원: .env 파일을 사용하여 환경 변수를 설정

2. 초기 코드

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

• app.js

function App() {
  return (
    <div>
      <h1>Welcome React.JS</h1>
    </div>
  );
}

export default App;

• src 내부에 아래 두 파일 외 지우기

3. 버튼 만들기

• Button.js 만들기

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

export default Button;

• import하고 사용하지 않으면 에러가 떠서 알려줌

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>Welcome React.JS</h1>
    </div>
  );
}

export default App;

• Button 사용하기

import Button from "./Button";

function App() {
  return (
    <div>
      <h1>Welcome React.JS</h1>
      <Button text={"계속"} />
    </div>
  );
}

export default App;

4. Props Type 설치하기

npm i prop-types

5. PropTypes 적용하기

• Button.js

import PropTypes from "prop-types";

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

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

export default Button;

6. style.css 파일로 적용하기

• style.css 만들기



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

• index.js에 적용하기

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import"./style.css";

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

• style.css 파일 삭제하고 적용하기

import PropTypes from "prop-types";

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

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

export default Button;

7. Button.module.css 만들기

• CRA의 분할과 정복을 이용하기

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

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

8. 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 React.JS</h1>
      <Button text={"계속"} />
    </div>
  );
}

export default App;