React.js - 소개, App 생성, App 구동
- React.js는 어떤 기술이며 왜 활용되나요?
리액트는 자바스크립트 라이브러리이다. 브라우저의 UI 작업을 처리하며, 이를 유용하게 해주는 도구들의 묶음인 라이브러리는 npm i 또는 npm install 명령어를 이용해서 쉽게 다운로드 할 수 있다. 리액트 앱을 만드는데 필요한 기본적인 도구들은 vite(프론트엔드 빌드 도구)를 사용해 쉽게 가져올 수 있다.
- React App은 어떻게 생성할 수 있나요?
먼저 패키지를 생성해야 한다. vite를 이용한다면 npm create vite@latest 명령어를 입력한다. 패키지 이름과 기본 설정들을 선택하면 폴더, 즉 패키지가 생성된다. 해당 폴더에 들어간 뒤 터미널에 npm i 를 입력해 라이브러리를 다운로드 해준다.
- React App은 어떻게 구동되나요?
웹 서버를 구동시켜주면 된다. 터미널에 npm run dev를 입력하면 웹 서버가 가동되고, 터미널에 접속할 수 있는 주소를 반환한다.
❓여기서 궁금증. vite도 개발용 서버를 제공하고, node.js도 서버를 제공하는데 이 둘의 관계는 어떠할까? 나는 vite가 node.js의 기능 중 하나인가 했는데 그렇지 않았다. vite는 node.js를 기반으로 만들어진 독립적인 도구이다. 즉, 리액트에서는 node.js를 사용하는 게 아니라 node.js 기반 도구들을 사용하는 것이다.
리액트의 기술적인 특징들
- 컴포넌트를 기반으로 UI를 표현한다.
웹 페이지의 구성 요소를 컴포넌트 단위로 구성하며, 해당 컴포넌트를 모듈화하여 사용한다. 모듈을 사용함으로써 중복 코드를 줄일 수 있다.
- 화면 업데이트 구현이 쉽다.
선언형 프로그래밍 (토마토 파스타 주세요.)과 명령형 프로그래밍(주방에 가서 물을 올리고 파스타 면을 넣어...)이 있다. 리액트는 전자의 선언형 프로그래밍을 사용하는데, 복잡한 명령 없이 특정 변수의 값만 바꿔줌으로써 화면 업데이트를 쉽게 구현할 수 있다.
- 화면 업데이트가 빠르게 처리된다.
브라우저의 렌더링 과정은 다음과 같다. layout과 painting 작업은 특히나 시간이 오래 걸리는데, 자바스크립트를 수정하게 되면 DOM(Document Object Model)이 수정됨으로써 레이아웃과 페인팅 작업 역시 다시 이루어진다.
하지만 리액트는 가상 DOM을 사용함으로써, 동시에 발생한 업데이트를 변수같은 곳에 모아놨다가 모든 업데이트가 모이면 한 번만 DOM을 수정한다. 알아서 성능을 높여주는 엄청 편리한 기술같다.