[React] 리액트 개요 - SPA, 라이브러리, Virtual DOM, 개발환경 및 세팅

리액트(React)란?

• React는 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리다.
• React는 싱글 페이지 애플리케이션(Single Page Application, SPA) 개발에 주로 사용된다.
• Virtual DOM과 JSX라는 독특한 개념을 사용하여 동작하며, 컴포넌트(Component)라고 불리는 작은 코드 모음을 활용하여 복잡한 UI를 손쉽게 구성할 수 있도록 해준다.

싱글 페이지 애플리케이션(SPA)

• 기존의 웹 앱은 대부분 멀티 페이지 애플리케이션(Multiple Page Application, MPA) 방식으로 개발되었기 때문에 하나의 애플리케이션이 여러 개의 웹 페이지로 구성되어 있다. MPA 방식의 웹 앱에서는 클라이언트(웹 브라우저)가 새로운 페이지를 요청할 때마다 서버로부터 정적 리소스(static resource)를 내려받아 매번 전체 페이지를 리렌더링(re-rendering) 하게 된다.
• 이와 달리 SPA 방식의 웹 앱은 단 한 개의 페이지만으로 구성된다. SPA 방식의 웹 앱에서는 애플리케이션에 필요한 모든 정적 리소스를 최초 단 한 번만 다운로드하여 렌더링하고, 이후 새로운 페이지에 대한 요청이 있을 때에는 페이지 갱신에 필요한 데이터만을 내려받아 리렌더링 한다.
• SPA 방식의 웹 앱도 아래와 같은 단점들이 분명히 존재한다.
  • 최초 단 한 번에 모든 정적 리소스를 내려받기 때문에 초기 구동 속도가 느리다.
  • 페이지가 동적으로 갱신되기 때문에 검색엔진 최적화(SEO)가 매우 어렵다.

라이브러리? 프레임워크?

• 라이브러리(library)는 애플리케이션을 개발할 때 단순 활용이 가능한 도구(기능)들의 집합이다. 자주 사용되는 기능들을 객체나 함수 등의 라이브러리 형태로 만들어 놓으면 나중에 필요할 때마다 해당 기능을 호출하여 사용할 수 있다.
• 프레임워크(framework)는 개발자가 원하는 기능 구현에만 집중할 수 있도록 필요한 기본 구조와 구성을 모두 포함하고 있는 일종의 틀(뼈대)이라고 할 수 있습니다. 즉, 개발에 필요한 데이터 모델링, 메모리 관리 등 공통된 부분은 프레임워크가 관리하고, 개발자는 프레임워크가 정해준 방식대로 필요한 기능들을 구현해 나가기만 하면 된다.
• 라이브러리와 프레임워크의 가장 중요한 차이점은 바로 애플리케이션의 제어 흐름(control flow)을 누가 가지고 있는가다. 프레임워크에서는 애플리케이션의 제어 흐름을 프레임워크 자신이 가지고 있으며, 개발자는 수동적으로 프레임워크가 짜 놓은 구성 안에서 자신이 필요한 코드만을 작성하게 된다. 반면 라이브러리에서는 개발자가 애플리케이션의 흐름을 직접 제어하면서 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용한다.
• 따라서 Angular와 Vue.js와 같은 웹 프레임워크에는 웹 개발에 필요한 라우터(router), 상태 관리 도구 등 다양한 도구들이 미리 포함되어 있다. 하지만 React는 사용자 View와 관련된 기능만을 제공하므로, 다른 기능들은 개발자가 직접 개발하거나 해당 기능을 제공하는 다른 라이브러리를 함께 사용해야 한다.

https://www.tcpschool.com/react/intro_understanding

 

Virtual DOM

문서 객체 모델(DOM)이란?

• 문서 객체 모델(Document Object Model, DOM)은 HTML이나 XML 문서의 구조화된 표현으로, 문서 내의 모든 요소를 정의할 뿐만 아니라 각각의 요소에 접근하는 방법(인터페이스)도 같이 제공한다. DOM은 노드(node)와 객체(object)로 문서를 표현하며, 자바스크립트와 같은 스크립팅 언어를 사용하여 수정할 수 있다.

https://www.tcpschool.com/react/intro_virtualdom

Virtual DOM

• Virtual DOM은 실제 존재하는 DOM이 아닌 메모리 상에서만 존재하는 가상의 DOM이다. React는 상태(state)가 업데이트되면, 우선 변경 사항이 모두 적용된 전체 UI를 새로운 Virtual DOM에 렌더링한다.  그리고 이전 버전의 Virtual DOM과 새로 생성된 Virtual DOM을 서로 비교하여 차이점이 있는 부분만을 실제 Browser DOM에 적용한다.
• 이를 통해 어떤 방식으로 View를 갱신해야 할지를 고민하지 않으면서도 성능을 크게 향상시킬 수 있다. 하지만 데이터가 지속적으로 변화하는 동적인 애플리케이션에서는 Virtual DOM을 사용했을 때 성능 향상이 큰 편이지만, 데이터가 자주 변경되지 않는 정적인 애플리케이션에서는 오히려 성능이 느려질 수도 있다.

https://www.tcpschool.com/react/intro_virtualdom

 

Reat 개발 환경 설정 방법

Node.js 설치

• Node.js는 크롬 V8 JavaScript 엔진으로 빌드된 자바스크립트 런타임이며, 웹 서버와 같이 확장성 있는 네트워크 프로그램의 개발을 위해 고안되었다. 이러한 Node.js는 웹 브라우저 환경이 아닌 곳에서도 서버를 구축하는 등 자바스크립트라는 프론트엔드 언어를 사용하여 백엔드까지 구현할 수 있도록 해줌으로써 현재 빠르게 점유율을 높여가고 있는 런타임 환경이다.
• React에서는 Node.js 설치 시 함께 설치되는 npm 패키지 매니저를 사용하여 React에 필요한 다양한 모듈의 설치, 업데이트 및 제거 등을 각 패키지들의 의존성까지 고려해가며 손쉽게 관리할 수 있다. 또한, React 개발에 사용할 수 있는 정적 모듈 번들러인 Webpack과 자바스크립트 컴파일러의 하나인 Babel 툴 체인이 함께 설치된다.
• 각자 OS에 맞는 Node.js 설치 파일을 공식 홈페이지(https://nodejs.org/ko/download)에서 다운로드 받아 설치한다.

Visual Studio Code 설치

• React 애플리케이션을 구현하기 위한 코드를 작성할 때 사용할 텍스트 에디터를 설치한다. 만약 기존에 사용하는 텍스트 에디터가 설치되어 있지 않다면 Microsoft 사에서 무료로 제공하는 Visual Studio Code의 사용을 추천한다.
• Visual Studio Code(VSCode)는 거의 모든 운영체제에서 동작하며, 디버깅 지원 및 Git 제어, 구문 강조 등의 다양한 기능을 지원한다. 또한, 거의 모든 주요 프로그래밍 언어를 지원하고, VSCode 마켓플레이스를 통해 다양한 확장 프로그램 및 편리한 플러그인을 무료로 다운로드 받아 사용할 수 있다.
• 각자 OS에 맞는 VSCode 설치 파일을 공식 홈페이지(https://code.visualstudio.com/download)에서 다운로드 받아 설치하도록 한다.

 

Reat 프로젝트 생성

• VSCode에서 터미널을 열고 아래 코드를 입력한다.
• npx는 npm v5.2.0부터 추가된 패키지 실행기(package runner)로, npm을 사용할 때 발생할 수 있는 여러 문제점을 해결하기 위해 고안되었다. npm과는 달리 패키지를 로컬에 설치하지 않고, 매번 해당 패키지의 최신 버전을 온라인으로 다운로드 받아 실행시킴으로써 npm의 단점인 패키지의 중복 설치 문제점을 해결한다.

npx create-react-app [프로젝트명]

• React 프로젝트의 생성이 모두 끝난 다음에는 해당 프로젝트 폴더로 이동하여 React 개발 서버를 구동해야 한다.

cd [프로젝트명]
npm start

 

Reference

• http://www.tcpschool.com