[React] React App 생성하기

리액트로 프론트엔드 개발을 시작하기 위해서는 React 앱을 생성하는 것이 선행되어야 하는데,

어떻게 리액트 앱을 생성해야 하는지 그리고 어떻게 구동해야하는지 단계별로 살펴보자

 

1. 왜 리액트 앱(애플리케이션)이라고 부를까?

웹 페이지는 보통 하나의 HTML로 구성되어 있지만,

리액트는 여러 개의 컴포넌트로 구성된 SPA(Single Page Application)이다.

각 컴포넌트가 하나의 기능 단위로 묶여 있고, 이를 조합해서 하나의 애플리케이션을 만든다.

즉, 단순한 HTML 페이지가 아니라 구조화된 프로그램에 가깝기 때문에 앱(App)혹은 애플리케이션이라고 부른다

 

2. 리액트 앱을 생성하는 방법

Node.js 패키지 생성 -> React 라이브러리 설치 -> 기타 도구 설치 및 설정

 

기타 도구 설치하고 설정하는 과정이 굉장히 까다롭기 때문에

React 공식 문서에서도 권장 하는 번들러인 Vite 를 사용하면 된다.

 

3. 터미널에서 Vite 설치하는 방법

Node.js 가 설치가 선행되어야 함

# npm 6.x 이상
npm create vite@latest my-react-app -- --template react

# 또는 yarn
yarn create vite my-react-app --template react

 

명령어 실행 후, 프로젝트 이름과 템플릿을 선택하게 되는데 react 를 선택하면 된다.

 

4. 설치 후 생성되는 폴더 구조

my-react-app/
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js

 

• public/ : 정적 파일 저장 폴더 (ex: favicon, 이미지 등)
• src/ : 실제 리액트 코드가 위치하는 곳
  • assets/ : 이미지, 폰트 등 에셋
  • App.jsx : 메인 컴포넌트
  • main.jsx : 앱을 렌더링하는 진입점
• index.html : 최종으로 렌더링되는 HTML 파일
• vite.config.js : Vite 설정 파일

 

5. jsx 확장자

JSX는 javascript XML의 줄임말로, 자바스크립트 코드 안에 HTML 태그를 작성할 수 있게 해준다.

function Hello() {
  return <h1>Hello, world!</h1>;
}

 

JSX를 사용하기 위해 .jsx 확장자를 사용하며, 이는 리액트 문법을 인식하게 하는 역할도 한다.

 

6. 주요 파일

 

• index.html: 앱의 뼈대가 되는 HTML. div#root가 있고, 여기에 리액트 앱이 렌더링된다.
• App.jsx: 실제 UI 컴포넌트가 들어가는 곳. 컴포넌트를 이 파일에 작성하거나 불러온다.
• main.jsx: App.jsx를 ReactDOM.createRoot()로 렌더링하는 진입 파일.
• vite.config.js: Vite 빌드와 관련된 설정을 정의하는 곳.
• .eslintrc.cjs: 코드 스타일 검사 도구인 ESLint 설정파일.

7. 리액트 실행하는 방법

프로젝트 폴더로 이동한 후, 터미널을 이용해 아래 명령어를 실행시킨다.

cd my-react-app
npm install
npm run dev

• npm install -> package.json dependencies 항목들을 설치
• npm run dev -> package.json scripts 에 적힌 명령어로 실행

한번 install 을 하고 나서는, dependencies 에 변화가 없다면 npm run dev 만 실행시키면 된다.

콘솔에 나온 저 url로 접속하면 성공이다