2. 리액트 앱 만들기

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

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

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

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

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

이 코드는 현재 폴더에 새로운 리액트 앱을 만들라는 명령어입니다.

기본으로 설정된 리액트 앱을 자동으로 만드는 작업이 시작 됩니다. 생성 시간은 평균 5분 내외입니다.

만약 이때 Need to install the following packages: ...라 는 메시지가 나오면 y를 입력 하면 됩니다.

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

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

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

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

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

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

그럼 Create React App이 자동으로 생성한 템플릿 파일과 폴더를 대략 살펴보겠습니다. package.json에서 ‘dependencies’ 항목을 보면 Create React App으로 생성한 리액트 앱에는 어떤 라이브러리가 설치되었는지, 리액트 버전은 몇 버전인지 등에 대한 정보가 들어 있음을 알 수 있습니다.

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

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

리액트 앱 실행하기

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

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

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

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

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

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

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

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

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