리액트 앱 만들기

이번 게시글에선 리액트 앱을 직접 만들고 어떻게 사용하는지 알아보겠습니다. 리액트 앱은 리액트로 만든 웹 서비스입니다. 리액트 웹이 아닌 앱으로 부르는 까닭은 리액트로 만든 웹 서비스는 마치 애플리케이션처럼 다양한 상호작용을 제공하기 때문입니다. 다시 말해 페이스북의 '채팅' 또는 '좋아요' 버튼 같은 서비스는 마치 사용자와 실시간으로 상호작용하는 응용 프로그램(Application, App) 과 흡사하기 때문입니다.

 

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

리액트 앱은 처음 만들 때 꽤 복잡한 설정을 직접 해주어야 합니다. Node.js 를 많이 사용해본 사람에겐 쉬울 수 있지만 입문자에게는 꽤나 큰 장벽입니다. 따라서 이 책에서는 리액트 앱을 만들기 위해 Create React App 이라는 Node.js 라이브러리를 이용할 예정입니다.

 

Create React App 은 보일러 플레이트입니다.

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

Create React App

 

Create React App 은 줄여서 CRA 라고도 합니다. CRA 는 리액트를 개발하고 운영하는 Meta(전 페이스북) 가 직접 개발하고 운영하는 공식 보일러 플레이트입니다.

https://create-react-app.dev/

Create React App

 

---

리액트 앱을 생성하기 위해 루트 폴더를 먼저 만들겠습니다. 문서(Documents) 폴더 아래에 chapter4 폴더를 생성한 다음 비주얼 스튜디오 코드에서 해당 폴더를 엽니다.

 

chapter4 폴더를 만들고 비주얼 스튜디오 코드에서 열기

 

chapter4 폴더를 열었다면 이제 Create React App 으로 리액트 앱을 생성합니다. 단축키 <Ctrl> + <J> 를 눌러 비주얼 스튜디오 코드의 터미널을 열고 다음 명령어를 입력합니다.

 

npx create-react-app . //점(.)은 현재 폴더를 의미합니다.

※ npx 란?

npx(Node Package Exrcute) 는 '노드 패키지 실행' 이라는 뜻의 명령어입니다. npx 는 npm 처럼 Node.js 를 처음 설치할 때 함께 설치됩니다. npx 를 이용하면 특정 라이브러리를 항상 최신 버전으로 실행할 수 있습니다.

Create React App 같은 보일러 플레이트는 새로운 리액트 앱을 생성하려는 목적으로 사용하므로 특정 패키지에 설치해 두고 사용할 필요가 없습니다. 또 시간이 지나 업그레이드되면 새 버전이 npmjs.com 에 출시됩니다. 따라서 항상 최신 버전의 리액트 앱을 생성하기 위해서는 npx 명령을 이용해야 합니다.

 

기본으로 설정된 리액트 앱을 자동으로 만드는 작업이 시작됩니다. 생성 시간은 평균 5분 내외입니다. 만야 이때 Need to install the following packages: ... 라는 메시지가 나오면 y 를 입력하면 됩니다.

 

chapter4 루트 폴더에서 Create React App 생성하기

만약 이 과정이 지나치게 오래 걸리면 네트워크 환경을 바꿔 보기 바랍니다.
npx 명령어와 관련해 오류가 발생하면 Node.js 설치가 잘못되었을 가능성이 높습니다. LTS 버전의 Node.js 가 설치되었는지 확인하고 아니라면 Node.js 를 다시 설치해야 합니다. 2022년 10월 기준으로 Node.js 의 최신 LTS 버전은 18버전입니다. 따라서 현재 설치된 Node.js 16버전 또는 18버전인지 확인하고, 이들 버전이 아니라면 기존 버전을 모두 제거한 후 다시 설치하기 바랍니다.

 

리액트 앱이 만들어지면 다음 그림처럼 Success! Created... 라는 메시지와 함께 리액트 앱을 사용하기 위한 다양한 명령어가 출력됩니다.

 

Create React App 으로 리액트 앱 생성

 

 

---

리액트 앱의 구성 요소 살펴보기

Create React App 으로 리액트 앱을 만들었으므로 어떤 요소가 생성되었는지 살펴보겠습니다. 비주얼 스튜디오 코드에서 chapter4 를 클릭하면 새롭게 생성한 리액트 앱의 구성 요소들을 살펴볼 수 있습니다. 

 

Create React App 으로 생성한 리액트앱 또한 Node.js 패키지입니다. 따라서 이 루트 폴더 아래에는 package.json, package-lock.json, node_modules 같은 Node.js 패키지 구성 파일이 존재합니다.

 

그런데 다음 그림을 보면 전 게시글에서 살펴본 외부 라이브러리를 설치하는 폴더 node_modules 외에도 public, src 와 같은 폴더도 보입니다. 

 

리액트앱 생성 후의 chapter4

 

이 폴더는 Create React App 이 자동으로 생성한 폴더들입니다. Create React App 은 리액트 앱을 생성함과 동시에 앱이 동작하는 데 필요한 파일과 폴더를 자동으로 생성합니다. 이런 파일과 폴더모음을 다른 말로 '템플릿(Template)' 이라고 합니다.

 

그럼 Create React App 이 자동으로 생성한 템플릿 파일과 폴더를 대략 살펴보겠습니다. 

package.json 에서 'dependencies' 항목을 보면 Create React App 으로 생성한 리액트 앱에는 어떤 라이브러리가 설치되었는지, 리액트 버전은 몇 버전인지 등에 대한 정보가 들어 있음을 알 수 있습니다.

 

package.json 을 열어 리액트 버전 확인하기

 

public 폴더는 리액트에서 공통으로 사용하는 폰트 파일, 이미지 파일 등을 저장하는 폴더입니다. favicon.ico, index.html, logo192.png, mainfest.json, robots.txt 등의 파일들이 기본으로 포함되어 있습니다.

 

src 폴더는 소스(source) 폴더라는 뜻으로 프로그래밍 소스를 저장하는 폴더입니다. 이 폴더는 리액트를 사용하는 동안 자바스크립트 파일들을 한데 모아놓은 곳으로, 프로젝트에서 사용할 소스파일을 저장합니다.

 

---

리액트 앱 실행하기

명령어를 이용해 리액트 앱을 실행하고 종료하겠습니다. 리액트 앱을 실행하는 명령어는 package.json 의 scripts 에 작성되어 있습니다.

 

package.json 의 scripts 확인하기

 

package.json 의 scripts 명령으로 리액트 앱을 실행하는 스크립트가 있습니다. 비주얼 스튜디오 코드 터미널에서 다음 명령을 입력해 start 스크립트를 실행합니다.

 

npm run start

 

이 스크립트를 실행하면 리액트 앱을 실행합니다.

 

자동으로 크롬 웹 브라우저에서 새 탭이 열리면서 리액트 앱의 주소인 http://localhost:3000에 접속합니다.

 

리액트 앱의 실행

 

위 그림은 Create React App 이 설정한 초기 템플릿 페이지입니다. 이 페이지는 나중에 사용자가 원하는 모습으로 얼마든지 변경할 수 있습니다.

 

비주얼 스튜디오 코드의 터미널에서도 리액트 앱을 실행했다는 메시지가 다음과 같이 출력됩니다.

 

터미널의 리액트 앱 실행 메시지

 

비주얼 스튜디오 코드 터미널에서 실행 중인 리액트 앱을 종료하는 방법 역시 간단합니다.

 

터미널에서 키보드 <Ctrl> + <C> 를 눌러 일괄 작업을 끝내시겠습니까 (Y/N)? 라는 메시지가 출력됩니다. 현재 작업(리액트 앱) 을 종료할 것인지 묻는데, 이때 y 를 입력하면 종료됩니다. 리액트 앱을 종료하면 터미널에서 프롬프트가 다시 활성화됩니다.

 

리액트 앱을 종료하면, 브라우저에서 주소 http://localhost:3000과의 접속 또한 자동으로 종료됩니다. 따라서 브라우저에서 새로고침하면 사이트에 연결할 수 없음 페이지가 나옵니다.

 

브라우저에서 새로고침하는 단축키느 <F5> 키입니다. 앞으로 자주 사용하게 되니 꼭 기억해두길 바랍니다.

종료된 리액트 앱