[리액트] 리액트 프로젝트 생성 및 설명

리액트 프로젝트 생성 전에 확인해야할 사항

• node 설치
• npm 설치
• yarn 설치
• npx 설치 (선택)
• git 설치 (선택)

리액트 앱 만들기

CRA (create-react-app) 을 통해 configuration 없이 손쉽게 개발 서버를 만들 수 있다. 이 때 웹팩 파일도 생성된다.

//npm을 이용해서 설치
npm install -g create-react-app

create-react-app [나만의 리액트 앱 이름]

npx create-react-app [내가 만들고자하는 앱이름]

리액트 앱 실행

yarn start

막 생성된 리액트 프로젝트 설명

CRA를 통해서 만들어진 리액트 프로젝트에는 여러 파일들이 생성된다. 리액트 앱이 실행되기 위해 필요한 핵심 파일은 다음과 같다. (CRA을 통해서 막 생성된 파일들을 기반으로 설명한다.)

• src/index.js: 앱의 시작점; Root 컴포넌트(기본적으로 App)을 DOM에 마운팅한다.

• src/App.js: 루트(Root) 컴포넌트. 즉, 최상위 컴포넌트

• public/index.html

public/index.html을 보면, id가 'root'인 div 태그 안에는 아무것도 들어 있지 않다. 리액트는 자바스크립트 통해, src/App.js의 App 컴포넌트에서 return 된 모든 element를 생성하고 index.html에 "root" id를 가진 div 태그 사이에 넣는다.

리액트 환경에서는 소스코드에 필요한 모든 html을 직접 넣을 필요가 없다. virtual DOM을 통해 html에 소스코드를 추가하거나 제거할 수 있다. src/index.js를 보면, 동작 방식을 더 이해하기 쉽다.

//index.js

import React form 'react'
import ReactDom from 'react-dom'
import App from './App.js' //현재 루트 컴포넌트

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

react 라이브러리를 불러와서 JSX문법을 해석할 수 있다. react-dom 라이브러리를 불러와서 render()함수를 통해 현재 루트 컴포넌트 App을 DOM에 마운트한다. 즉, (1)App 컴포넌트 렌더링; App.js에서 return안에 jsx문법으로 작성한 코드를 (2)getElementById() 함함수로 id가 'root'인 태그에 넣는 것을 알 수 있다.

★ react는 유저인터페이스(user interface; UI)
★ react-dom은 리액트 웹사이트에 출력(render)하는 걸 도와주는 모델

★ 즉, react-dom을 사용해서 UI인 react를 '웹' 사이트에 올릴 수 있는 것이다. ★

리액트 동작 방식 순서를 정리하자면,

1. ★가장 먼저, 빈 html파일 'index.html'을 실행한다.
2. 'App.js'의 render함수에서 요소를 return한다.
3. index.js를 참조하여 index.html에서 해당 id를 가진 div 태그 안에 return받은 소스코드를 넣는다.