[React] create-react-app로 프로젝트 생성하기

쉽게 React 프로젝트를 만들기 위해서는

create-react-app을 사용하여 많은 스크립트들과 많은 사전설정들을 미리 설정할 수 있도록 하는 것이 좋습니다.

 

✅ create-react-app 설치

node.js를 설치한 뒤 터미널에서 create-react-app을 통해 프로젝트를 생성합니다.

 

$ npx create-react-app 프로젝트명

 

✏️ npm과 npx의 차이

npm은 node.js의 의존성과 패키지 관리를 위한 패키지 매니저입니다.

프로젝트의 패키지를 설치할 때 npm install을 실행함으로써 package.json 파일에 있는 패키지들을 지정할 수 있다는 것을 의미합니다.

또한, 버전 관리를 지원하여 패키지의 버전을 명시해 원하는 버전을 설치하도록 할 수 있습니다.

 

npx는 node 패키지를 실행시키는 하나의 도구이며 npm 5.2버전부터 내장되어있습니다.

npx는 기본적으로 실행될 패키지가 경로에 있는지 먼저 확인한 뒤 경로에 있다면 그대로 실행하고

만약 경로에 없다면(설치가 되지 않은 패키지라면) npx가 최신 버전의 패키지를 설치한 후에 실행한 뒤 사라집니다.

 

React는 모듈 업데이트가 많아 npm으로 재설치하지 않는 경우 이전 버전을 사용할 수 있기 때문에 npx를 통해 항상 최신 버전을 설치하는 것이 중요합니다.

 

 

✏️ 생성된 프로젝트

 

---

 

✅ Button 컴포넌트 생성

// src/Button.js

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

export default Button;

text라는 prop을 가진 Button 컴포넌트를 src 폴더 안에 만들고

App.js에 가져올 수 있도록 export default Button; 코드를 추가해줍니다.

 

// src/App.js

import Button from "./Button";

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

export default App;

App.js에서 Button 컴포넌트를 import 해줍니다.

 

이 때, Button을 import 했지만 사용하지 않았다는 경고 메시지를 출력해줍니다.

이것은 create-react-app에서 알려주는 경고입니다.

 

 

import Button from "./Button";

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

export default App;

Button 컴포넌트를 사용하면 경고 메시지가 사라지게 됩니다.

 

---

 

✅ prop-types 설치

$ npm i prop-types

컴포넌트 props의 타입을 지정해주기 위해 prop-types 패키지를 설치해줍니다.

 

 

// Button.js

import PropTypes from "prop-types";

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

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

export default Button;

Button 컴포넌트 props의 타입을 지정해주고 isRequired 옵션을 설정하여 필수 prop으로 지정해줍니다.

 

 

만약 위의 코드로 Button을 사용했다면 type에 대한 오류가 vs code 내에서도 보여지며

 

 

콘솔 창에서도 필수적인 prop을 안썼다는 경고 메시지를 띄워줍니다.

 

---

 

✅ JSX 자동완성

React를 사용하여 프로젝트를 진행할 경우

vs code에서 자동완성 기능을 사용하기 위해서는 vs code setting을 수정해야 합니다.

 

settings.json 파일에서 코드를 추가합니다.

(위치는 상관없음)

 

"emmet.includeLanguages": { "javascript": "javascriptreact" }