[React] 5-0. Create React App

📌 Create React App

이전 시간까지는 script를 직접 import 함으로써 React App을 만들었었다.

but, Create React App은 많은 script들과 많은 사전 설정들을 준비해 주기 때문에 사용하면 React App 개발이 더 편해진다.

예를 들면 개발 서버에 접근하거나, 자동으로 페이지 새로고침을 하거나, 즉각적으로 어플리케이션 안에 CSS를 포함시켜 주는 등의 다양한 기능이 존재한다.

명령 프롬프트에 다음과 같이 입력해 보자.

node -v

node.js의 버전이 제대로 나오면 node.js가 제대로 설치되어 있는 것이다.

npx

npx가 제대로 작동하는지 확인한다.

다음과 같은 형식으로 입력하면 C 드라이브의 사용자 폴더에 React App 폴더를 생성할 수 있다.

npx create-react-app 프로젝트명

이제 VS Code로 해당 프로젝트 폴더를 열면 package.json 파일이 있는 것을 볼 수 있는데, 이 파일에 script에 대한 정보가 있는 것을 볼 수 있다.

script 객체에 start 키가 있는 것을 볼 수 있는데, 우리는 이 start 스크립트를 실행시켜 볼 것이다.

VS Code의 터미널(node)에 다음과 같이 입력한다.

npm start

리액트 로고가 있는 창이 뜨는 것을 볼 수 있다.

src 폴더 또한 볼 수 있는데, 내가 생성한 모든 파일들을 넣는 폴더이다.

src 폴더 안에서 가장 중요한 파일은 index.js라고 볼 수 있다. 이것은 우리가 작성한 React App을 화면에 랜더링해주는 역할을 한다.

create-react-app은 우리의 어플리케이션을 index.html 안에 넣어주도록 설정되어 있다.

index.js 파일에서 우리에게 필요 없는 것들을 지울 것이다. 다음과 같이 index.js 파일을 수정한다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

App.js 파일에는 함수형 컴포넌트 App과 약간의 jsx가 작성되어 있는 것을 볼 수 있다.

App.js에서도 우리에게 필요 없는 코드들은 지워보도록 하겠다.

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

export default App;

마지막으로 App.text.js, App.css, index.css, logo.svg, reportWebVitals, setupTests 파일을 지워준다.

우리는 node.js로 작업하고 있기 때문에 파일들을 각각 분리시키는 것이 가능하고, 좀 더 조직적으로 구성할 수 있게 되었다.

한 파일당 하나의 컴포넌트를 가지고 있고, index.js에서 그 컴포넌트를 import 시켰다.

이로 미루어 보다 버튼과 같은 작은 것들도 한 개의 파일(하나의 컴포넌트)로 이루어질 것이다.