React - CRA

mia·2022년 12월 18일

React

React를 글로 배워보자

목록 보기

2/16

CRA..?

Create React App

Set up a modern web app by running one command
: 명령어 하나만으로 리액트 개발환경을 구축할 수 있다.
React를 이용해 웹 애플리케이션을 개발하기 위해 필요한 도구들을 모아놓은 "툴 체인"이다.
왜..?
: React는 UI를 구축하기 위한 자바스크립트 라이브러리이기 때문에, UI외의 많은 기능들을 위해 다른 패키지가 필요하다, 하지만 항상 필요한 패키지를 다운받고 호환성을 맞추며 환경설정을 하는 것이 무척 번거롭고 힘들기 때문에 CRA를 통해 환경을 구축한다.
CRA 외에도 많은 툴체인을 React에서 추천하고 있지만 현재 나는 React를 배우는 단계이며 SPA 웹 애플리케이션을 구축할 예정이기 때문에 그에 맞는 CRA 툴체인을 선택했다.

터미널에서 CRA 실행 방법

: 터미널에서 원하는 폴더로 들어간 후 (cd [폴더]) 아래의 명령어 입력.

npx create-react-app [프로젝트명]

브라우저로 연결

npm start

실행 중인 서버 종료

Ctrl + C

CRA 구조

node_modules 폴더
: npm으로 설치한 패키지들이 저장되는 폴더. CRA가 프로젝트 환경을 구성하면서 필요한 패키지들을 다운받아 줌.
이 안에서 React, ReactDOM, Barbel등이 들어있어 매번 import해주지 않아도 된다.
public 폴더
: > index.html 파일
SPA을 구성하는 하나의 html이 바로 이 파일이다.
하지만 막상 body안에는 하나의 div만 존재하는데 이는 자바스크립트를 통해 모든 작업을 처리하기 때문이다.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>React App</title>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
      </body>
    </html>

src 폴더
: > App.js 파일
이 안에서 작성된 컴포넌트가 화면에서 구현된다.
, > index.js파일
App.js 파일 안에서 작성한 컴포넌트를 화면 상에서 보여주는 역할을 하는 것이 index.js 파일이다. import 구문을 통해 다른 파일을 가져왔는데 src폴더의 index.css파일과 App.js 파일 그리고 node_modules의 react 패키지와 react-dom/client 패키지를 가져오고 있다.
import해서 가져온 ReactDOM 객체에서 root라고 하는 아이디를 가진 div(index.html에 있음)에 접근 후 render, root안에 App컴포넌트를 띄워달라고 하는 것이다.

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

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

.gitignore 파일
: 굳이 git으로 버전관리를 할 필요 없는 파일이나 폴더들은 여기 기입해두면 git에서 추적하지 않게 된다. 이 안에는 node_modules폴더가 들어있는데 너무나 방대한 양의 패키지를 git으로 관리할 필요가 없기 때문이다. 그렇기때문에 깃허브에서 clone받게 된다면 node_modules폴더가 없다. 이는 프로젝트를 제대로 구동할 수 없기 때문에 package.json 파일에 있는 패키지 정보를 이용해 npm install 명령어를 터미널에 입력하면 npm이 필요한 패키지들을 분석해 다운로드 시켜준다.
package-lock.json 파일
package.json 파일
: 패키지에 대한 정보가 기입되어 있다. dependencies항목에는 패키지가 의존하고 있는 패키지들에 대한 정보들이 있다.
README.md 파일
: 프로젝트에 대한 설명을 작성해 두는 파일이다.