[지식루프 IT공부] 리액트 실행 안될때 해결방법

npm init react-app .  명령어를 실행했으나, 다음과 같은 메시지만 나오고 프로젝트가 생성되지 않았을 때,

> npx > create-react-app . You are running create-react-app 5.0.1, which is behind the latest release (5.1.0). We recommend always using the latest version of create-react-app if possible. The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/

Getting Started | Create React App

 

 

 

다음 명령어를 실행하면, 프로젝트가 잘 생성된다. 

npx create-react-app@latest .   

 

hello_react 폴더 내에 프로젝트가 잘 생성된 모습은 다음과 같다. 

 

이렇게 자동적으로 생성된 파일들은 기본적으로 프로젝트를 실행할 수 있게 해준다. 

다음 명령어를 실행하면, 

npm run start 

 

아래와 같이 기본적인 페이지를 보여준다. 

 

 

프로젝트 내 src 폴더에서 App.js 파일을 클릭하면 열어보면 

html 태그들 같은 것들이 보이는 것을 확인할 수 있다. 

 

리액트에서는 자바스크립트 코드 안에 이런 태그를 섞어서 쓰며, 이런 문법을 jsx 라고 부른다. 

 

여기 header 아래에 h1 태그를 추가하여 '안녕 리액트!' 라고 입력한 후 저장하면, 

 

실행페이지에서 새로고침을 한 적이 없음에도 불구하고 해당 문구가 반영되어 있음을 확인할 수 있다. 

 

이는 아까 npm run start 명령어를 통해서 개발모드를 실행한 것이며, 파일 저장만 하면 화면 새로고침 필요없이 바로바로 화면에 반영해주어, 개발 시 실시간으로 적용 여부를 볼 수 있어 훨씬 편리하게 개발할 수 있다. 

 

개발 모드를 종료하는 방법은 터미널에서 ctrl + c 를 하면 된다. 

 

[정리]

npm init react-app 은 create-react-app 이라는 도구를 통해서 리액트 프로젝트를 생성하는 명령어이다. 

npm init react-app <폴더이름> 또는 해당 폴더에서 npm init react-app . 를 실행

 

만약 제대로 프로젝트 생성이 안될 경우, 

npx create-react-app@latest .   

를 실행하여 프로젝트를 생성한다. 

 

그리고 개발모드 실행은 

npm run start  명령어를 통해서 실행한다. 

 

개발모드 종료는 ctrl + c 를 한다. 

 

=============================

 

상기에서 사용한 Create React App은 더 이상 관리되지 않는 프로젝트이기 때문에, 프로젝트 생성에 Vite라는 도구를 쓰는 걸 권장한다고 합니다. 

 

vite 도구 사용법은 다음과 같습니다. 

 

1. 프로젝트 생성

명령어 입력 : npm create vite@latest . -- --template react

설치 여부 : y 입력

 

그러면 프로젝트가 생성된다.

 

2. 실행에 필요한 패키지 설치

명령어 입력 : npm install

 

설치 완료되면 폴더 안에 node_modules 라는 폴더가 생성된다. 

 

3. 프로젝트 실행

명령어 입력 : npm run dev

 

이후, 아래 화면이 보이면 성공.

 

 

 

 

[참고사항]

리액트 18버전 이후에는 이전에 index.js 가 아닌, main.jsx 가 있으며, 

기존에 index.js 파일의 ReactDOM.render() 하던 것은 main.jsx 파일 내에 root.render()  에서 작성하면 된다. 

 

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);