React 개발환경 설정 방법

이번에는 리액트 앱을 직접 만들고 어떻게 사용하는지를 확인해본다

Create React App으로 리액트 앱 만들기

리액트 앱은 처음 만들 때 꽤 복잡한 설정을 직접 해주어야 한다. Node.js를 많이 사용해본 사람에게는 쉬울 수 있지만 입문자에게는 꽤나 큰 장벽이다

따라서 리액트 앱을 만들기 위해 Create React App이라는 Node.js 라이브러리를 이용할 예정이다. Create React App은 복잡한 설정 없이 리액트 앱을 만들어 주는 고마운 라이브러리이다

“Create React App은 보일러 플레이트”

Create React App처럼 복잡한 설정 없이 쉽게 프로젝트를 생성하도록 돕는 개발 도구를 보일러 플레이트라고 한다. 보일러 플레이트란 ‘보일러를 찍어내는 틀’이라는 의미를 담고 있으며 보일러 플레이트를 이용하면 처음 보일러를 만들 때처럼 복잡한 구조를 염두에 두지 않고도 쉽게 보일러를 만들 수 있다.

Node.js와 npm설치

nodejs는 자바스크립트로 네트워크 어플리케이션을 개발할 수 있도록 환경구성을 도와주는 라이브러리

npm는 node package manager 의 약자로 프로젝트에서 필요하는 외부 라이브러리 버전등을 관리해주는 라이브러리이며 nodejs설치시 npm은 자동으로 설치된다

• (1) nodejs 다운로드 페이지 에서 운영체제에 맞게 설치하기

• (2) 터미널을 열어 하기 명령어로 설치확인 (각 버전명이 나오면 정상)

  $ node --version
  $ npm --version
  

React 프로젝트 만들기

(1) cmd 명령프롬프트 혹은 vscode의 터미널을 열어서 하기 명령어를 수행

###### 프로젝트 생성 명령어 ######
$ npx create-react-app <만들고자하는 프로젝트 이름>

(2) cmd 명령프롬프트 혹은 vscode의 터미널을 열어서 하기 명령어를 수행

###### 프로젝트 폴더로 이동후 프로젝트 실행 명령어 ######
$ cd <위에서 생성한 프로젝트 이름>
$ npm start

(3) 웹을 열어서 접속되는지 확인하기

[실행 영상]

리액트 앱에는 어떻게 접속하는걸까

위에서 “create-react-app”으로 리액트 앱을 만들고 “npm run start” 명령으로 앱을 구동해 보았다. 그 결과 리액트 앱을 실행하면 http://localhost:3000으로 접속한다는 사실을 알게 되었다.

그렇다면 어떤 원리로 리액트 앱에 접속하는 걸까? 결론부터 말하자면 Create React App으로 만든 리액트 앱에는 “웹 서버”가 내장되어 있다. 즉, npm run start 명령을 실행하면 브라우저가 리액트 앱에 접속하도록 앱에 내장된 웹 서버가 동작하며 결국 내장된 웹 서버 주소로 브라우저가 자동으로 접속하게되는것이다.

보여지는 구성은 어떻게 되는걸까

사용자가 주소 http://localhost:3000으로 리액트 앱에 대한 서비스를 요청하면, 리액트 앱 서버는 우선 웹 페이지 파일인 public 폴더의 index.html을 보낸다.

index.html 파일내의 아래와 같이 ReactDOM.createRoot는 인수로 전달된 요소를 리액트 앱의 루트로 만들어 반환하는 메서드를 사용한다.

“const root = ReactDOM.createRoot(document.getElementById(‘root’));”

이 코드의 의미를 다시 정리하면 돔에서 id가 ‘root’인 요소를 루트로 만들어 root 라는 변수에 저장한다. 바로 public 폴더의 index.html에 있는 “div” 태그가 바로 루트 요소이다.