4. [ReactJS] Create React App 사용하기

Create React App은 React 애플리케이션을 빠르고 간단하게 설정할 수 있는 공식적인 도구입니다. 

이 도구는 React 애플리케이션을 구성하는 데 필요한 모든 설정 및 빌드 작업을 자동화하여 개발자가 더욱 편리하게 개발할 수 있도록 도와줍니다.

---

Create React App을  사용한 React JS개발 특징

• 제로 구성: Create React App은 초기 설정과 빌드 설정에 대한 복잡한 작업을 최소화합니다. 개발자는 바로 React 애플리케이션을 작성하고 실행할 수 있습니다. 설정 파일을 작성하거나 환경을 구성할 필요가 없습니다.
  
  
• 개발 서버: Create React App은 개발 서버를 제공하여 애플리케이션을 개발하는 동안 빠르고 쉽게 변경 사항을 확인할 수 있습니다. 파일이 수정될 때마다 자동으로 다시 빌드되고 브라우저를 새로 고침합니다.
  
  
• 배포 최적화: Create React App은 프로덕션 환경에서 최상의 성능을 위한 애플리케이션을 생성합니다. 최적화된 빌드를 생성하여 파일 크기를 최소화하고, 코드를 압축하고, 캐싱을 활용합니다.
  
  
• 환경 변수 설정: Create React App은 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 다양한 환경에 대해 다른 변수 값을 설정하여 개발, 스테이징 및 프로덕션 환경에 대해 다른 설정을 제공할 수 있습니다.
  
  
• 테스트 지원: Create React App은 Jest를 사용하여 테스트를 작성하고 실행할 수 있는 통합된 테스트 환경을 제공합니다. 개발자는 컴포넌트 및 기능의 테스트를 쉽게 작성할 수 있습니다.
  
  

- Create React App 링크: https://create-react-app.dev/

Create React App

---

1. Node.js 설치: Create React App을 사용하려면 먼저 Node.js가 설치되어 있어야 합니다. Node.js는 JavaScript 런타임 환경으로, npm(Node Package Manager)을 함께 설치합니다. Create React App은 npm을 사용하여 설치 및 관리됩니다. Node.js를 설치하려면 Node.js 공식 웹사이트로 이동하여 최신 버전을 다운로드하고 설치하세요.
   
   
2. Create React App 설치: Node.js가 설치되었다면 터미널 또는 명령 프롬프트를 열고 다음 명령을 입력하여 Create React App을 전역으로 설치합니다: npx create-react-app my-app
   
   
3. 위 명령은 create-react-app 패키지를 다운로드하고 프로젝트 폴더인 my-app을 생성합니다. npx는 npm 패키지를 실행하는 데 사용되는 도구로, create-react-app을 자동으로 설치하고 실행합니다.
   
   
4. 프로젝트 폴더로 이동: Create React App을 설치한 후 생성된 프로젝트 폴더로 이동합니다. 이를 위해 다음 명령을 입력합니다: cd my-app
5. 개발 서버 실행: 프로젝트 폴더로 이동한 후 다음 명령을 입력하여 개발 서버를 실행합니다: npm start
6. src 디렉토리 내에서 React 컴포넌트를 작성하고 수정하면서 애플리케이션을 개발합니다. 변경 사항은 개발 서버에서 실시간으로 반영됩니다.
7. 개발이 완료되면 npm run build 명령을 실행하여 프로덕션용 빌드를 생성합니다. 생성된 정적 파일은 build 디렉토리에 위치합니다.

module.css 를 사용하면 class명을 랜덤하게 생성해줍니다.

---

prop-type 설치하기

• prop-types는 React 컴포넌트의 prop 유효성 검사를 수행하기 위한 라이브러리입니다. 

1. Create React App 프로젝트 폴더로 이동: prop-types를 설치하기 전에 Create React App 프로젝트 폴더로 이동해야 합니다. 이를 위해 터미널 또는 명령 프롬프트에서 프로젝트 폴더로 이동하는 명령을 입력합니다:
   cd my-app
2. prop-types 설치: Create React App 프로젝트 폴더에서 다음 명령을 실행하여 prop-types를 설치합니다:
   npm install prop-types
   위 명령은 npm을 사용하여 prop-types 패키지를 설치합니다. 패키지가 프로젝트에 로컬로 설치되며, package.json 파일의 dependencies 섹션에 추가됩니다.
3. prop-types 사용: prop-types가 성공적으로 설치되었으므로 React 컴포넌트에서 prop 유효성 검사를 수행할 수 있습니다. 예를 들어, 다음과 같이 prop-types를 사용하여 컴포넌트의 prop 유효성을 확인할 수 있습니다:

import React from 'react';
import PropTypes from 'prop-types';

function MyComponent(props) {
  // prop 유효성 검사
  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
}

MyComponent.propTypes = {
  // prop 유효성 검사 규칙
};

export default MyComponent;

• 위 예제에서 MyComponent 컴포넌트의 propTypes 객체를 사용하여 각 prop의 유효성 검사 규칙을 정의할 수 있습니다. prop 유효성 검사 규칙에는 isRequired를 사용하여 필수 prop인지 여부를 지정할 수도 있습니다.
• prop-types를 사용하여 컴포넌트의 prop 유효성을 검사하고 유효하지 않은 값이 전달되었을 때 개발 환경에서 경고 메시지를 표시할 수 있습니다. 이를 통해 애플리케이션의 안정성을 향상시킬 수 있습니다.