리액트 강좌

2-1.개발 환경

노드

어떤 과목이든지 공부를 하려면 개발 환경을 갖추어야 한다. 리액트는 개발 환경이 잘 갖추어져 있지만 초보자가 처음부터 완벽하게 꾸미기는 쉽지 않다. 생산성을 높이는 툴까지 다 설치하기는 번거로우니 학습에 필요한 기본 환경부터 단순하게 꾸며 보자.

웹 앱을 구성하는 html, css, js는 텍스트 파일이라 편집기만 있으면 개발할 수 있다. 그러나 배포까지 고려하면 폴더 구조를 치밀하게 설계해야 하고 테스트를 위해 매번 새로 고침하는 것도 번거로워 수정 후 즉시 결과를 볼 수 있는 툴을 갖추는게 편리하다.

이런 정교한 구조를 직접 만들기는 어렵고 비효율적이어서 마법사, 전문가 등으로 불리는 생성 툴을 사용하는 것이 좋다. 리액트는 vite, CRA(Create React App)등 옵션만 입력하면 프로젝트를 만들어 주는 생성툴을 제공한다. 또한 트랜스파일러, 번들러, 간이 서버까지 갖추어 로컬에서 모든 개발과 테스트를 수행할 수 있다.

프로젝트 생성툴은 자바스크립트 실행엔진인 Node.js의 패키지 형태로 제공된다. 노드를 리액트에서 직접 쓰는 것은 아니지만 프로젝트를 생성하는 툴이 모두 자바스크립트로 되어 있으니 이게 없으면 아무 것도 할 수 없다. 다음 사이트를 방문한다.

https://nodejs.org

25년 12월 최신 버전은 24.11.1이며 LTS버전이다. 너무 최신 버전은 안정성이 떨어지므로 마지막 LTS 버전을 받는 것이 좋다. 대략 30M짜리 설치 파일 하나를 다운로드받아 실행한다. 설치 옵션은 모두 디폴트를 받아들인다.

설치 후 경로에 추가되므로 바로 쓸 수 있다. 노드는 그래픽 개발 환경이 아니어서 명령행에서 스크립트 형식으로 명령을 내려 사용한다. 명령행에서 node -v 명령으로 버전을 조사해 보면 설치 여부를 확인할 수 있다. 노드를 설치하면 노드 패키지 관리자인 npm도 자동으로 설치된다. 잘 설치되었는지 버전을 확인해 보자.

C:\Users\soen>node -v

v24.11.1

C:\Users\soen>npm -v

11.6.2

이걸로 리액트 프로젝트를 생성하고 실행한다. Node.js는 리액트 실행환경일 뿐이므로 딱히 특정 버전을 사용할 필요없이 최신 버전만 깔아 놓으면 된다. 당장 배워야 할 선수 과목은 아니므로 설치해 놓고 사용하기만 하자. 추후에 백엔드도 개발해 보려면 그때는 배워야 한다.

VSCode

다음은 쓸만한 텍스트 편집기를 설치한다. 스크립트는 다 텍스트 포맷이므로 원칙적으로는 메모장으로도 모든 것을 할 수 있다. 그러나 생산성이 너무 떨어지므로 전문 편집기를 갖추는 것이 좋은데 리액트 개발에는 주로 VSCode를 많이 쓴다.

https://code.visualstudio.com/download

현재 최신 버전은 1.106.2이다. 세 운영체제를 모두 지원하며 윈도우용은 로그인 계정으로 설치하는 사용자 설치본과 관리자 계정으로 설치하는 시스템 설치본 두 가지와 CPU 타입에 따라 x64와 Arm64 버전을 제공한다. 관리자 계정으로 설치하면 시스템 관련 프로그램 업데이트가 쉽다는 이점이 있지만 일반적인 경우는 사용자 설치본이면 무난하다.

User Installer x64 버전(100M)을 받아 실행한다. 대부분의 옵션은 디폴트로 선택하면 된다. 필수적인 것은 아니지만 추가작업 페이지에서 "Code로 열기" 옵션 2개만 더 선택해 두면 탐색기에서 프로젝트를 열기 편하다.

기본 옵션이 무난하게 세팅되어 있지만 몇가지 옵션은 바꿔서 쓰는 것이 좋다. 옵션은 파일/기본 설정/설정 메뉴를 선택하거나 좌하단의 톱니바퀴 아이콘을 클릭한 후 설정 메뉴를 선택하여 조정한다. 다음은 리액트 개발에 권장되는 옵션인데 취향에 따라 선택하자.

▶ 영문으로 써도 크게 불편하지는 않지만 한글 언어팩 정도는 설치해 두는 것이 좋다. 메뉴는 사실 File/Save나 파일/저장이나 그게 그거지만 옵션명이나 확장 프로그램의 설명 등은 영어보다는 한글이 읽기 편한 면이 있다. 왼쪽 사이드바의 확장 버튼을 클릭한 후 한국어로 검색하여 언어팩을 설치한다.

▶ 아래쪽 톱니바퀴 아이콘을 클릭하고 Settings(설정) 항목을 선택한다. 탭 크기 옵션을 4에서 2로 변경한다. 보통 4를 쓰지만 리액트는 들여쓰는 단계가 깊어 2로 맞춰 쓸 것을 권장한다. 이 옵션을 조정한 상태에서 단축키 Alt+Shift+F를 누르면 들여쓰기를 가지런히 조정해 준다

▶ 설정창의 왼쪽 트리에서 텍스트 편집기/글꼴을 선택하여 조정한다. 디폴트 글꼴이 Consolas, 'Courier New', monospace로 되어 있는데 한글에 맞는 폰트가 아니어서 그리 예쁘지 않다. 공개용 한글 글꼴을 설치해서 사용하는 것이 좋은데 D2Coding이 무난하다. 고해상도 모니터에서는 크기도 적당히 키워서 쓰는 것이 좋다.

▶ 보기/모양 메뉴에서 미니맵, 고정스크롤 기능은 끄고 쓰는게 좋다. 미니맵은 오른쪽에 긴 문서의 내용을 이미지 형태로 보여 주고 고정스크롤은 첫 몇줄을 상단에 고정해 주는데 둘 다 유용한 기능이지만 처음 쓸 때는 오히려 헷갈리고 화면만 차지하니 일단 꺼 두고 다음에 필요할 때 쓰도록 하자.

▶ 설정창에서 update mode를 검색하여 조정한다. 최신 버전이 발표될 때마다 새 버전을 안내해 주는 것은 친절한 기능이지만 잦아도 너무 잦아 거의 스팸 수준이다. 지금 당장 말썽없이 잘 쓰고 있다면 불필요하게 업데이트할 필요는 없다고 생각하며 개인적으로 none이나 manual을 선호한다. 각자 취향에 맞게 조정하자.

VSCode외에도 Sublime, Notepad++ 등의 편집기를 많이 쓴다. 손에 익은 편집기를 쓰되 이 책은 VSCode로 실습을 진행한다.

그 외 크롬 브라우저도 설치하는 것이 좋다. 아마 대부분 쓰고 있겠지만 없으면 설치하자. 엣지에서도 확인 가능하지만 크롬의 개발툴이 잘 정비되어 있어 학습에 유용하다. 이 책도 크롬에서 실행한다. 기본 브라우저도 크롬으로 설정해 놓는 것이 편리하다.

플러그인

VSCode는 다양한 플러그인으로 기능을 쉽게 확장할 수 있다는게 장점이다. 필요에 따라 플러그인을 선택적으로 설치하되 ESLint는 거의 필수적으로 설치하는게 보통이다. 왼쪽 탭의 확장 버튼을 클릭하여 마켓플레이스를 열고 검색 및 설치한다.

ESLint는 소스를 편집할 때 컴파일하지 않고 정적으로 소스를 검사하여 잘못된 내용을 알려 준다. 컴파일해 보지 않고 소스 내용만 읽어 오류 가능성이 있는 부분을 알려준다. 개발할 때도 물론이지만 학습할 때 실수를 금방 알 수 있어 큰 도움이 된다.

알아서 동작하므로 딱히 사용방법을 익힐 필요도 없다. 코드에 몇 가지 실수를 만들어 보면 이상하다 싶은 부분에 빨간색 줄을 그어준다.

<h2>의 닫는 태그를 </h3>로 잘못 썼다. <p> 태그는 </p>로 닫지 않았다. 편집창에 빨간줄을 그어 문제를 보여주며 문제창에도 보여준다.

정적 검사이기 때문에 컴파일을 하지는 않는다. id 속성을 idea로 쓰거나 score 변수를 noscore로 써도 잡아 내지는 못한다. 이런건 컴파일해 봐야 알 수 있다. 단순 실수 등은 신속하게 알려주므로 시간을 꽤 많이 절약해준다.

여기서는 학습에 필수적인 플러그인만 설치했다. 실무를 할 때는 더 강력한 툴과 플러그인이 많이 필요하지만 처음 학습할 때부터 너무 완벽하게 갖추려면 배우기도 전에 지쳐 버린다. 오픈소스툴은 통합성이 떨어지고 버그가 많아 초보자가 범접하기 만만치 않다. 또 종류가 너무 많고 취향을 타는지라 뭐가 필요한지도 아직은 잘 모른다. 최소 환경으로 기본을 익힌 후에 환경을 점점 업그레이드하는 것이 바람직하다.

2-2.Vite

vite 소개

웹 앱이 제대로 동작하려면 수 많은 구성 파일이 모여야 한다. 문서 내용을 정의하는 HTML, 스타일을 정의하는 CSS, 동작을 정의하는 스크립트 파일은 물론이고 수 많은 이미지 파일, XML 파일 등이 필요하다. 뿐만 아니라 실행하고 배포까지 하려면 설정 파일도 정교하게 구성되어 있어야 하고 효율적인 개발을 위해 디렉토리 구조도 잘 만들어야 한다.

이 모든 것을 처음부터 완벽하게 만들어 내는 것은 어려운 일이다. 프로젝트 골격을 만들어 주는 도구를 스타트 킷이라고 부르며 전문 용어로는 스케폴딩(Scaffolding)이라고 하는데 건물을 지을 때 먼저 세우는 비계처럼 뼈대를 먼저 만들어 주는 것이다. 리액트의 스타터 킷도 여러 가지가 있다.

▶CRA(Create React App) : 리액트의 공식적인 스타터로서 지금도 많이 사용되며 선택할게 없어 간편하다. Babel로 컴파일하고 WebPack으로 번들링하는데 설정이 어렵고 속도가 느려 요즘은 잘 사용하지 않는다.

▶Vite : ES Build로 컴파일하고 Rollup으로 번들링한다. 리액트의 경쟁 제품인 Vue.js와 함께 만들었으나 현재는 리액트뿐만 아니라 다양한 라이브러리를 지원한다. 모듈 교체 속도가 빨라 시원스럽다. 리액트 19부터는 CRA를 거의 대체하였다.

▶Parcel : 작고 간편해 소규모나 테스트용 앱 제작에 실용적이다. 실무 프로젝트용으로는 잘 사용하지 않는다.

오픈소스의 세계에서는 항상 새로운 강자가 나타나기 마련이지만 현재는 vite가 대세이며 당분간은 그럴 것이다. vite는 프랑스어로 빠르다는 뜻이며 원주민 발음은 '비트'인데 짧게 '빗'이라고 읽으면 된다. 이름이 의미하는 바대로 빠른 속도가 가장 큰 장점이며 실제로도 빠르다.

스타터 킷은 골격을 만드는 도구일 뿐이어서 뭘 선택하더라도 리액트를 활용하는 방법이 다른 것은 아니다. 프로젝트의 구조와 샘플 코드가 다르고 빌드 방식이 달라질 뿐이다. 취향에 따라 선택하되 이 강좌는 대세에 따라 vite로 진행한다.

프로젝트 생성

개발 환경을 다 갖추었으니 이제 실습을 해 보자. 실습중에 만들 파일을 한 곳에 모아둘 실습 폴더를 만든다. 이 강좌에서는 찾기 쉽도록 C 드라이브 루트에 reactStudy 폴더를 생성한다. 저장 공간의 여유 상황에 따라 다른 위치를 사용해도 상관 없지만 여기 저기에 파일을 흩어 두는 것보다는 한 폴더에 모아 두는 것이 관리하기 편하다.

vite는 노드의 패키지 형태로 제공되며 명령행에서 동작한다. 그래픽 프로그램이 아니라 조금 불편하지만 대화형으로 질문에만 답하면 프로젝트를 생성해 준다. 명령행을 열고 프롬프트에서 대화형으로 프로젝트를 생성한다. 실습폴더인 reactStudy로 이동한 후 단계별로 프로젝트를 만들어 보자.

1.npm create vite@latest 명령을 내린다. npm은 노드의 패키지를 관리하는 프로그램이며 노드 환경에서 패키지를 실행한다. create 명령은 프로젝트를 생성하라는 뜻이며 vite@latest는 vite의 최신 안정 버전을 사용하라는 지시이다. @latest는 생략해도 상관 없지만 가급적이면 최신 안정 버전으로 명시하는 것을 권장한다.

처음 실행할 때는 vite가 당연히 설치되어 있지 않다. 그렇다고 직접 설치할 필요는 없다. 패키지 관리자인 npm이 친절하게 vite 패키지를 받아 설치부터 한다. 최신 버전을 표시하고 설치할 것인지 질문한다.

C:\reactStudy>npm create vite@latest

Need to install the following packages:

create-vite@8.2.0

Ok to proceed? (y)

디폴트가 y이므로 Enter만 누르면 패지지를 설치한다. 최초 한번만 설치하면 되니 두 번째 실행할 때부터는 이 질문이 나타나지 않는다.

2.프로젝트 이름을 물어 보며 디폴트로 vite-project가 입력되어 있다. 원하는 이름을 입력하되 처음 만드는 vite 프로젝트라는 의미로 fitstvite로 입력해 보자. 입력중에 BS키로 오타 정도는 수정할 수 있다.

3.사용할 프레임워크를 선택한다. vite는 굉장히 많은 프레임워크를 지원하는데 이래서 빌드툴의 표준 자리를 차지한 것이다. 아래 위 커서키로 이동하여 React를 선택하고 Enter를 누른다.

4.사용할 언어를 선택한다. 여러 언어를 쓸 수 있지만 요즘은 TypeScript를 많이 사용하고 권장한다. 실습중에는 JavaScript를 사용해도 큰 차이는 없다. 디폴트로 선택되어 있으므로 Enter만 누르면 된다.

5.시범적 기능을 사용할 것인가를 물어 보는데 디폴트가 No이므로 제외하자. 이런 질문은 vite 버전에 따라 나타나지 않을 수도 있다.

6.설치 및 실행까지 하겠느냐고 묻는데 디폴트는 Yes로 되어 있다. 디폴트를 선택하면 모든 것을 다 해 주고 바로 실행 결과까지 볼 수 있어 편리하다. 지금은 프로젝트를 구성하고 실행하는 세부 과정을 살펴 보기 위해 일단 No를 선택해 보자.

여기까지 하면 프로젝트를 생성한 후 결과 보고서를 보여 주고 명령행으로 복귀한다. 일단 만들어 놨으니 필요한 명령을 실행하라는 안내를 보여준다.

이 상태에서 firstvite 폴더에 뭘 만들어 놨는지 탐색기로 살펴 보자. 프로젝트 루트에는 여러 가지 설정 파일이 있고 public, src 폴더에는 이미지와 소스가 들어 있다.

프로젝트의 골격은 고작 14K 용량밖에 안되는데 순수한 소스만 포함되어 있다. 이것만 가지고는 웹앱을 바로 실행할 수 없고 빌드와 실행에 필요한 패키지를 받아야 한다. 프로젝트 디렉토리 안으로 들어가 npm install 명령을 내린다.

C:\reactStudy>cd firstvite

C:\reactStudy\firstvite>npm install

vite는 빌드에 필요한 목록만 작성하고 실제 패키지는 따로 받도록 되어 있다. 패키지의 업그레이드 속도가 빨라 프로젝트 생성 후에도 지속적인 관리가 필요하기 때문이다. 뱅글뱅글 돌아가는 애니메이션이 보이고 패키지를 다운로드 받는다.

node_modules라는 폴더가 생기고 이 안에 패키지를 받아 놓는다. 프로젝트 폴더의 용량은 거의 100M에 육박한다. 패키지는 언제든지 다시 받을 수 있으므로 프로젝트의 일부는 아니며 백업할 필요도 없다. 필요할 때 최신 버전으로 다시 받으면 된다. 이제 모든 준비가 완료되었으니 npm run dev 명령으로 실행해 보자.

C:\reactStudy\firstvite>npm run dev

개발 모드로 프로젝트를 실행하라는 뜻이다. 프로젝트를 빌드하고 실행하지만 화면에는 안내만 나타날 뿐 별다른 변화는 없다.

웹 앱은 네트워크를 통해 접속하고 실행하는 프로그램이므로 로컬에서 직접 실행할 수는 없고 브라우저를 열어야 한다. vite는 로컬에 웹 서버를 실행하고 그 주소를 알려 주는데 여기에 접속하면 된다. 브라우저를 실행하고 주소창에 http://localhost:5173/을 입력하면 샘플 페이지가 나타난다.

이미지와 텍스트가 있고 이미지를 클릭하면 이동하는 링크도 걸려 있다. 가운데 count is 0 버튼을 클릭하면 1씩 증가하는 간단한 동작도 보여 준다. 아직 별 기능은 없지만 어엿한 웹 앱이며 비록 로컬에 있지만 웹 서버가 사용자의 요청에 응답하고 있다.

웹 서버는 별도의 명령이 없는 한 계속 대기한다. 브라우저를 종료하거나 다른 페이지로 이동하는 것은 접속을 끊는 것이지 웹 앱을 끝내는게 아니다. 프로그램을 종료하려면 명령행에서 Ctrl + C를 눌러 강제 종료한다. 정말 끝낼 것인지 물어 본다.

일괄 작업을 끝내시겠습니까 (Y/N)?

이 질문에 명시적으로 Y라고 대답해야 웹 앱이 종료되고 프롬프트 상태로 돌아온다. 웹 서버를 종료하면 더 이상 사용자의 명령에 응답할 수 없으니 이 상태에서 브라우저를 새로고침하면 연결할 수 없다고 나온다. 물론 언제든지 npm run dev 명령으로 다시 실행하여 재기동하면 또 접속할 수 있다.

vite로 프로젝트를 생성, 실행하는 실습을 해 봤는데 질문이 많아 복잡해 보인다. 그러나 몇번만 해 보면 금방 익숙해지며 10초내로 프로젝트를 만들 수 있다. 입력해야 할 것은 프로젝트 이름 뿐이고 나머지는 옵션만 선택하면 된다. secondvite, thirdvite 프로젝트를 계속 만들어 보자.

이것도 귀찮다면 질문없이 한방에 처리하는 명령을 내리는 방법도 있다. 지금 명령행의 현재 폴더가 firstvite 안이므로 cd.. 명령으로 일단 실습 폴더로 돌아온다. 그리고 다음 명령을 내리면 프로젝트명, 프레임워크, 언어를 한방에 선택할 수 있다. 이후 설치 여부 등의 질문에만 답하면 된다.

C:\reactStudy>npm create vite@latest secondvite -- --template react-ts

이 명령을 내리고 Enter만 두 번 누르면 되니 가장 신속한 방법이다. 발전 속도가 빨라 질문 내용이나 선택 가능한 옵션은 vite 버전에 따라 조금씩 달라질 수 있다.

프로젝트의 구조

vite로 만든 프로젝트는 폴더 자체가 프로젝트이며 폴더 안에 서브 디렉토리로 구성 파일을 분류해 놓았다. 탐색기로 직접 살펴 볼 수도 있지만 개발툴이 구조를 더 잘 보여주고 소스도 바로 열어서 볼 수 있어 편리하다. VSCode를 실행하고 파일/폴더 열기 명령을 선택하여 폴더를 연다.

특정 파일을 여는게 아니라 폴더 자체를 선택한다. c:\reactStudy\firstvite 폴더를 선택하면 이 폴더의 프로젝트를 열어 주고 왼쪽 탐색기뷰에 프로젝트의 구조를 보여 준다. 처음 실습중이면 보안상의 문제가 있음을 경고하는 팝업창이 나타난다.

내가 방금 작성한 것이므로 신뢰해도 될 거 같지만 어디선가 다운받은 파일이라면 어떤 코드를 실행할지 알 수 없으므로 확인을 거치는 것이다. 부모 폴더 아래의 모든 파일을 신뢰한다는 체크박스를 선택해 놓으면 다시 묻지 않는다. 이래서 실습 폴더를 한군데로 정해 두는게 편하다.

폴더를 열면 왼쪽 탐색기에 디렉토리 구조를 보여 준다. 여기서 파일을 열수 있고 원하면 즉시 편집해서 수정해 볼 수도 있다. 그냥 클릭은 탭의 파일명이 이탤릭채로 표시되며 잠시 보는 것이라 다른 파일을 클릭하면 닫힌다. 반면 더블클릭은 계속 열어 둔다는 차이가 있다. 루트의 index.html을 더블클릭해서 열어 보자.

프로젝트 폴더의 용량은 92M 정도 되며 빌드 및 실행에 필요한 모든 패키지가 다 포함되어 있다. 디렉토리 구조부터 살펴 보자.

디렉토리, 파일
node_modules	노드가 사용하는 라이브러리 집합이다. 용량이 큰데 언제든지 npm install 명령으로 다시 받을 수 있으므로 프로젝트 백업이나 전달시에는 제외해도 상관 없다.
public	아이콘과 이미지 등을 저장한다. 디폴트로 vite.svg 이미지 파일이 들어 있다.
src	프로젝트의 소스이며 주로 편집해야 할 대상이다. 화면 배치와 스타일 파일 등이다.
index.html	메인 페이지이다. 웹 시작 페이지이며 브라우저에서 열기 위한 파일일 뿐 개발 대상은 아니다.
package.json	패키지 정보를 담은 파일이며 어떤 라이브러리를 사용하는지 목록이 작성되어 있다.
vite.config.ts	빌드 설정 파일이다.

대부분 기본 구조를 만들기 위한 파일이며 핵심 소스는 src 폴더에 있다. 프로젝트 구조 위주로 순서대로 분석해 보되 지금은 개별 코드까지 다 이해할 필요는 없다. 웹브라우저가 처음 읽는 파일은 index.html이다.

<!doctype html>

<head>

<title>firstvite</title>

</head>

<body>

</body>

</html>

평범한 HTML 파일이다. vite.svg는 웹 페이지를 대표하는 파비콘이며 public폴더에 있다. 형식이 image/svg+xml로 되어 있는데 텍스트 형식의 벡터 이미지라는 뜻이며 실제로 열어 보면 텍스트 파일이다. 역삼각형 모양의 vite 로고가 새겨져 있으며 웹 브라우저의 탭에 표시된다.

바디에는 <div> 엘리멘트가 있고 이름이 root로 되어 있다. 컴포넌트를 붙일 접합 지점이며 리액트는 이 안에 내용물을 실시간으로 채워 넣는다. HTML 구조에 맞추기 위한 시작점일 뿐이므로 굳이 이름을 바꾸거나 다른 속성을 줄 필요 없다. 편집해서는 안되며 삭제해서도 안된다. 그냥 이대로 두면 된다.

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.tsx'

createRoot(document.getElementById('root')!).render(

<App />

</StrictMode>,

)

소스 선두에서 리액트의 핵심 라이브러리인 react와 랜더링 라이브러리인 react-dom을 임포트한다. 별도의 경로없이 파일명만 지정되어 있는데 이 경우는 node_modules 폴더에서 읽는다. vite가 미리 받아 프로젝트 폴더에 포함시켜 두어 임포트만 하면 쓸 수 있다. 이 두 파일이 리액트 그 자체이다.

▶react : 리액트의 핵심 객체이며 환경에 무관한 공통 기능을 제공한다. 리액트의 엔진에 해당한다.

▶react-dom : 브라우저의 DOM에 연결하여 입출력을 담당하는 랜더러이다. 화면을 그리는 역할을 한다.

버전 14 이전에는 소스가 하나였는데 이후에는 웹뿐만 아니라 다른 환경에서도 실행할 수 있도록 핵심 기능과 표현 기능을 분리했다. 엔진과 랜더러가 분리되어 있다는 것은 웹 외의 다른 곳에도 리액트를 쓸 수 있다는 얘기이다. 리액트는 한번 배워 여기 저기 활용(Learn Once, Write Anywhere)할 수 있으며 이를 위해 랜더러를 세분해 놓았다.

랜더러	설명
react-dom	웹 브라우저에 그린다.
react-native	안드로이드나 iOS 같은 모바일 앱을 생성한다.
react-art	<canvas> 또는 SVG에 그려 그래픽으로 출력한다.
react-pdf	PDF 문서를 생성한다.

두 모듈을 임포트하여 리액트로 웹 앱을 만들 준비를 한다. 다음은 같은 폴더(./)의 프로젝트 소스와 스타일을 읽어온다. 대규모 개발을 위해 기능별로 소스 파일을 잘게 나누어 놓았다. index.css는 색상과 테두리 모양, 폰트 등의 전역 스타일을 지정하는데 소스가 길어 일부만 보인다. 전체적으로 중앙 정렬되어 있다.

....

body {

margin: 0;

display: flex;

place-items: center;

min-width: 320px;

min-height: 100vh;

}

....

button {

border-radius: 8px;

border: 1px solid transparent;

....

./App.tsx는 같은 디렉토리의 App.tsx 파일을 의미하며 이 파일에서 App 컴포넌트를 읽는다. App이 곧 우리가 만들어야 할 화면이며 실제 웹 페이지를 정의하는 가상 DOM을 정의하는데 잠시 후 따로 살펴 보자.

스크립트 코드에서 root 엘리먼트를 찾고 render 함수에서 App 컴포넌트를 배치하여 랜더링한다. index.html에서 정의해 놓은 <div id="root">를 찾고 이 안에 <App /> 컴포넌트를 끼워 넣는다. 웹 브라우저에 표시하려면 index.html 껍데기가 필요하고 이 안에 실제 알맹이는 App으로 채우는데 이 구조를 만들어 내는게 main.tsx의 역할이다.

<StrictMode>는 이 안에서 문법 검사를 엄격하게 수행하여 위험한 코드나 폐기된 코드를 실행할 때 경고를 발생시킨다. 일종의 디버깅 영역이며 최종 빌드에서는 알아서 제거하므로 성능상의 불이익은 없다. 당장 없어도 동작에는 큰 지장이 없고 지워버려도 되지만 개발중에는 문제 파악에 꽤 도움이 되므로 그냥 두는 것이 좋다.

main.tsx는 root안에 App을 채우는 역할만 하며 대부분의 리액트 앱에 이 구조가 적합하므로 직접 편집할 일은 없다. 앱의 모양과 동작을 결정하는 진짜 알맹이는 App.tsx이다. JSX라는 고유의 문법으로 되어 있고 몇 가지 코드가 있지만 일단은 HTML이라고 생각하고 대충의 구조만 봐 두자.

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

function App() {

const [count, setCount] = useState(0)

return (

<div>

</a>

</a>

</div>

<h1>Vite + React</h1>

<button onClick={() => setCount((count) => count + 1)}>

count is {count}

</button>

<p>

Edit <code>src/App.tsx</code> and save to test HMR

</p>

</div>

Click on the Vite and React logos to learn more

</p>

</>

)

}

export default App

vite 로고와 react 로고 이미지를 나란히 배치하고 각 사이트로 이동하는 링크가 걸려 있다. 사용자의 동작에 반응한다는 것을 보이기 위해 버튼을 누르면 카운트를 1 증가시키는 샘플 코드가 작성되어 있다. 이 코드에서 count는 상태에 해당하며 useState 훅을 사용하는데 잠시 후 연구해 볼 것이다.

나머지는 App.tsx를 수정한 후 저장하라는 것과 더 공부하고 싶으면 로그를 클릭하라는 안내 문자열이다. App() 컴포넌트 함수는 가상 DOM을 생성하여 리턴하는 JSX로 기술되어 있다. 이미지 소스에 {viteLogo}를 끼워 넣은 것과 태그의 클래스 지정을 className으로 한다는 것 외에는 HTML과 유사해 대충 봐도 내용을 파악할 수 있다.

소스의 마지막에서 App 함수를 엑스포트하여 외부에서 호출할 수 있도록 공개한다. main.tsx의 render 메서드에서 App을 참조하는데 이를 위해 공개해 둔 것이다. export default App;문장을 삭제하면 컴포넌트를 찾지 못해 랜더링이 안된다. 엑스포트 목록을 한눈에 파악할 수 있도록 파일 끝에 별도의 export문을 작성하는걸 권장하지만 함수 자체에 export 지정을 해도 상관 없다.

export default function App() {

....

이 함수가 생성하는 가상 DOM이 root안을 채워 웹 페이지를 그린다. 스타일이 복잡해 보일 뿐 결국 <img>, <p>, <a> 태그로 구성한 간단한 샘플 페이지일 뿐이다. App.css는 정렬, 배경색, 여백 등을 지정하는 스타일시트이다.

#root {

max-width: 1280px;

margin: 0 auto;

padding: 2rem;

text-align: center;

}

.logo {

height: 6em;

padding: 1.5em;

will-change: filter;

transition: filter 300ms;

}

.logo:hover {

filter: drop-shadow(0 0 2em #646cffaa);

}

.logo.react:hover {

filter: drop-shadow(0 0 2em #61dafbaa);

}

@keyframes logo-spin {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

@media (prefers-reduced-motion: no-preference) {

a:nth-of-type(2) .logo {

animation: logo-spin infinite 20s linear;

}

.card {

padding: 2em;

}

.read-the-docs {

color: #888;

}

프로젝트의 구성 파일이 많아 복잡해 보이지만 자세히 살펴 보면 접합 지점과 컴포넌트, 스타일 시트로 찢어 놓았을 뿐이다. 파일간 관계를 파악하면 어디를 어떻게 수정해야 할지 알 수 있다.

문서를 출력할 장소가 있어야 하므로 index.html이 root <div>를 정의하는데 이건 웬만해선 바꿀 일이 없다. main.tsx는 App 컴포넌트를 생성하여 root에 채워 넣는데 이 동작도 딱히 바꿀 필요가 없다. 이 둘은 프로젝트를 구성하기 위한 껍데기에 불과하다.

화면에 뭘 보여주고 어떻게 동작할 것인가를 결정하는 것은 App 컴포넌트이며 어떻게 보여줄 것인가는 App.css의 스타일로 지정한다. 결국 이 두 파일만 잘 수정하면 웬만한 웹앱은 다 만들 수 있다.

프로젝트 수정

vite가 만든 프로젝트를 수정해 보자. 지금 실행중이라면 Crtl+C를 눌러 일단 종료하고 명령행도 닫아 버리자. 출력할 내용을 정의하는 App 컴포넌트가 제일 중요하며 주 편집 대상이다. 이 안에 어떤 문서를 작성하고 어떤 동작을 처리하는가에 따라 어떤 앱이 될지 결정된다.

과연 그런지 App.tsx를 수정하여 컴포넌트 내부를 바꿔 보자. 로고는 이미지를 준비하기 번거로우니 문자열과 링크만 수정해 보자. 영문 메시지를 한글로 바꾸고 vite의 링크는 네이버를 가리키도록 수정한다. 제일 아래 공부하라는 잔소리 메시지는 삭제하자.

function App() {

const [count, setCount] = useState(0)

return (

<div>

</a>

</a>

</div>

<button onClick={() => setCount((count) => count + 1)}>

count is {count}

</button>

<p>

편집 후 저장하세요.

</p>

</div>

</>

)

}

한글을 사용했으므로 소스는 UTF-8 인코딩으로 저장한다. VSCode는 디폴트가 UTF-8이지만 다른 편집기는 그렇지 않을 수도 있으므로 인코딩을 확인해야 한다. 수정 후 저장하고 다시 실행하되 명령행 창으로 이동할 필요없이 VSCode안에 있는 터미널을 사용하면 된다. 보기/터미널 명령을 실행하고 npm run dev명령을 내린다.

대부분의 경우 이런 에러 메시지가 나타나는데 이유는 파워쉘의 기본 설정이 스크립트 실행을 금지하기 때문이다. 파워쉘을 관리자 권한으로 실행하고 Set-ExecutionPolicy Unrestricted 명령 실행 후 Y를 입력하면 해결되며 딱 한번만 하면 된다. 이보다 더 간단한 방법은 파워쉘 대신 명령행으로 바꿔 버리는 것이다.

명령행에서는 스크립트 실행 제한이 없어 npm run dev 명령이 잘 실행된다. 명령행과 똑같은 메시지가 나타나며 브라우저가 실행된다. 만약 브라우저가 나타나지 않으면 명령행의 Local 링크를 Ctrl 클릭하면 된다.

종료할 때 이 창에서 Ctrl+C를 누르면 된다. 다른 프로젝트를 열거나 VSCode를 종료할 때 리액트 앱도 자동 종료되므로 걱정할 필요 없다. 이후 별도의 명령행창을 열 필요없이 터미널에서 실습을 진행하자. 새로 수정한 페이지는 다음과 같다.

만약 이미 실행중이라면 저장만 하면 된다. 서버를 기동해 놓으면 수정할 때마다 일일이 재실행할 필요없이 소스 파일만 저장하면 번들러가 이를 인지하고 즉시 재배포한다. 이를 HMR(Hot Module Replacement) 또는 핫 리로딩(hot reloading)이라고 한다.

과연 그런지 <h1>리액트 샘플앱</h1>의 내용을 <h1>반가워요</h1>로 바꾼 후 저장해 보자. 명령행에 업데이트했다는 메시지가 나타나며 브라우저도 화면을 실시간으로 갱신한다. 이 기능 덕분에 리액트를 실습하기 편하다.

오후 8:35:23 [vite] (client) hmr update /src/App.tsx

페이지의 디자인은 스타일시트가 결정한다. 글꼴이나 정렬, 색상을 변경하려먼 스타일시트를 수정한다. 이번에는 App.css의 스타일시트를 수정해 보자. 리액트 로고에 애니메이션 처리가 되어 있는데 미디어쿼리에 의해 조건부 처리되어 있다. 사용자가 애니메이션 옵션을 켜 놓았을 때만 동작하는데 윈도우의 경우 설정/접근선/시각의 다음 옵션이다.

이 옵션을 켜 놓았으면 원자 모양이 뱅글뱅글 돌아가는 애니메이션이 되며 꺼 놓았으면 아무 동작도 하지 않는다. 이런 효과를 귀찮게 생각하는 사람은 옵션을 꺼 놓는 경우가 많다. @media (prefers-reduced-motion: no-preference) 옵션은 사용자가 애니메이션 옵션을 별도로 금지하지 않았으면~ 이라는 뜻이다.

미디어 쿼리문을 주석 처리하여 조건을 빼면 옵션에 상관없이 항상 애니메이션 된다. 참고로 CSS의 주석은 /* */ 이며 한줄 주석이 따로 없으므로 아래 위 두 줄의 시작과 끝을 다 막아야 한다. 애니메이션 시간은 20초에서 2초로 조정하여 더 빠르게 한다.

#root {

....

background-color: greenyellow;

}

/* @media (prefers-reduced-motion: no-preference) { */

a:nth-of-type(2) .logo {

animation: logo-spin infinite 5s linear;

}

/* } */

배경색은 연두색으로 바꾸었다. 그 외에 마진, 폰트 크기, 배경색, 정렬 등 원하는 스타일을 얼마든지 바꿀 수 있다. 이번에도 저장하는 즉시 웹페이지에 반영된다. 윈도우의 옵션을 꺼 놓았더라도 로고가 빠르게 회전하며 애니메이션되는 것을 볼 수 있다.

vite는 효율적인 작업 분담을 위해 소스 파일을 나누고 재배포의 편의를 위해 복잡한 프로젝트 구조를 만들어 놓았다. 이 구조를 작 익혀 두면 언제 어디를 수정해야 할지 신속하게 파악할 수 있다.

랜더링

App 함수는 JSX 구문을 해석하여 가상 DOM을 생성한다. 이 문서는 메모리상에서 만든 것이어서 아직 화면에 보이지 않는다. 가상 DOM을 화면에 있는 실제 노드에 붙여 그리는 것을 랜더링이라고 한다.

실제 DOM 노드를 찾아 붙임으로써 화면에 나타나는데 이 동작은 main.tsx에서 처리한다. 먼저 다음 메서드를 호출하여 붙일 지점인 root를 찾는다. 첫번째 인수 domNode로 DOM상의 노드를 지정하며 두번째 인수는 생략 가능하다.

createRoot(domNode, options?)

코드에서는 document.getElementById('root')!를 호출하여 id가 root인 태그를 찾는다. 뒤에 붙은 ! 기호는 타입스크립트의 연산자이며 null이 아님을 보장한다는 뜻일 뿐 별 의미는 없다. <div> 엘리먼트는 index.html에 미리 배치해 놓았다. 이 태그를 루트로 생성하고 가상 DOM을 부착할 때는 다음 메서드를 호출한다.

render(reactNode)

리액트로 만든 노드를 인수로 전달하는데 보통은 JSX를 리턴하는 함수이다. 이 예제에서는 App 함수 컴포넌트가 그 역할을 하며 <App />로 지정한다. 리액트는 컴포넌트도 태그처럼 사용하므로 태그와 같은 문법으로 표기한다.

<App /> 표기문은 App 함수를 호출하여 가상 DOM을 생성하고 render는 이 가상 DOM을 root 아래에 랜더링한다. 즉, DOM의 실제 노드에 JSX로 정의한 가상 DOM을 추가하여 화면에 보이도록 하는 것이다.

JSX 구문으로 생성한 가상돔은 실행중에 함수가 생성하므로 얼마든지 복잡한 구조를 만들 수 있고 변수도 자유롭게 사용할 수 있다. 그리고 HTML 문서상의 부착지점을 찾아 그 아래에 붙임으로써 브라우저에 보여줄 화면을 완성했다.

랜더링 코드는 딱 두 줄이라 이해하기 어렵지 않다. 그래서 main.tsx는 웬만해서는 수정할 일이 없으며 vite가 작성해준대로 사용만 하면 된다. 고급 기법을 구사할 때 외에는 이 코드를 편집할 일은 거의 없다.

번들러

firstvite 프로젝트는 구조가 단순해 이해하기 어렵지 않으며 상세히는 물라도 대충 어떻게 돌아가는지 감을 잡을 수 있다. 그런데 잘 생각해 보면 좀 이상한 점이 있다. main.tsx에서 index.css를 임포트하고 App.tsx에서 App.css를 임포트하는데 이 방식이 정상적인 구조는 아니다.

자바스크립트 표준에 스타일시트를 다루는 기능은 없으며 확장 언어인 타입스크립트도 마찬가지이다. 스타일은 HTML 파일에서 참조하는 것이지 코드에서 처리하는게 아니어서 스크립트가 css를 읽는 것은 사실 말이 안된다. 이게 가능한 이유는 중간에서 번들러가 가능하게 해 주기 때문이다.

웹 페이지 하나는 여러 종류의 파일이 모여서 구성된다. HTML로 내용을 표현하고 CSS로 디자인을 입히고 스크립트(*.js, *.tsx) 파일로 동작을 기술한다. 이 외에도 이미지 파일과 폰트, 데이터 파일 등이 필요하다. 구성 파일이 많다 보니 개발을 완료한 후 배포하는 것도 쉽지 않다.

하나라도 빠지면 제대로 동작하지 않는다. 게다가 스크립트끼리는 종속 관계가 있어 포함 순서에도 신경써야 한다. 이런 복잡한 작업을 번들러(Bundler)가 대신 처리한다. vite는 Rollup이라는 최신 번들러를 사용하며 다음 동작을 수행한다.

▶ 불필요한 코드는 제거한다. 사용되지 않은 코드는 배포하지 않는다.

▶ 긴 변수 이름을 줄이고 불필요한 공백을 제거하여 크기를 더 줄인다.

▶ 앱의 코드를 작은 청크(Chunk)로 분할하여 꼭 필요한 청크만 로드할 수 있도록 한다.

▶ 최신 문법을 사용한 코드를 구형 브라우저에서 실행할 수 있도록 한다.

▶ CSS 스타일을 스크립트가 이해할 수 있는 형태로 바꿔준다.

▶ 코드 변경시 즉시 재배포하여 결과를 실시간으로 확인할 수 있다.

보다시피 생각보다 많은 처리를 해 준다. 덕분에 매번 테스트할 때마다 서버로 파일을 올리고 재기동하지 않아도 된다. 소스를 수정하고 저장만 하면 즉시 결과를 볼 수 있다. 예전에는 다 수작업으로 했던 배포, 테스트 과정을 자동화했다.

개발환경에서는 번들러를 사용하지 않고 브라우저의 ESM 기능을 활용하여 요청한 모듈만 변환하는 식으로 더 최적화되어 있다. 자바스크립트는 원래 모듈 기능이 없어 사소한 변경에도 모든 코드를 다시 묶어 배포해야 했다.

ES6부터 ESM(ECMAScript Modules) 모듈 시스템을 도입하여 코드를 조각 조각 나눌 수 있게 되었다. 브라우저는 변경이 발생한 모듈만 교체하는 식으로 빠르게 업데이트를 수행한다. vite는 브라우저가 요청한 것만 새로 변환하는 식으로 모듈 교체 속도를 높였다. 속도가 빠른 정도가 아니라 거의 실시간이다.

이 외에도 번들러는 WebPack, Parcel 등의 여러 가지 제품이 발표되어 있으며 각각 장단점이 있다. 번들러의 세부적인 동작까지 다 이해하지 못하더라도 중간에 이런 장치가 동작하고 있다는 것은 알고 있어야 한다. 이런 번들러가 기가 막히게 잘 동작하도록 프로젝트를 구성해 주는게 바로 vite이다.