[React] 리액트란?

리액트란?

 

 

• 리액트는 컴포넌트 기반의 UI 라이브러리다.
• 리액트의 핵심적인 역할은 사용자 정의 태그를 만드는 것이다.

 

1. 컴포넌트화 : 공통적으로 다른 페이지에도 사용해야 하는 요소들을 컴포넌트화 해서 재사용한다.
   • 공통적으로 사용되는 부분에 문제가 생겼거나 수정해야 할 때 컴포넌트가 정의된 파일만 수정하면 자동으로 수정된다. 
2. 선언형 프로그래밍 : 목적을 바로 말한다. ex.리액트
   • 명령형 프로그래밍 : 절차를 하나하나 다 나열해야한다. ex. jQuery
3. 가상 돔 : 한 번에 모아서 리얼 돔에 업데이트 시킨다. 렌더링 과정을 거치지 않는다.
   • DOM에 요소를 추가하는 잦은 업데이트는 브라우저가 필요 이상의 연산을 수행하기 때문에 성능 저하로 이어진다.

 

리액트는 2013년에 페이스북에서 발표한 오픈소스 자바스크립트 프레임워크이다. 리액트 프레임워크는 가상 DOM과 JSX라는 새로운 방식으로 동작하는 프레임워크이다. 요즘 웹 개발은 프런트엔드와 백엔드로 분리하여 표현하곤 한다. 여기서 프론트엔드 개발이란 웹 브라우저를 대상으로 사용자에게 보여지는 부분을 자바스크립트 언어로 작성하는 것을 의미하고, 백엔드 개발은 프런트엔드에서 요구하는 데이터를 제공하는 형태의 개발을 의미한다. 이런 관점에서 리액트는 앵귤러, 뷰와 함께 대표적인 자바스크립트 프레임워크로 분류한다.

 

---

 

1. 싱글 페이지 애플리케이션(SPA)이란?

 

웹 서버는 웹 브라우저가 요청하는 다양한 유형의 자원(resource)을 제공하는 역할을 한다.

 

• 웹 브라우저에서 웹 서버가 제공하는 자원을 얻으려면 주소 창에 'http://웹_서버/자원1'과 같은 URL 문자열을 HTTP 프로토콜을 사용하여 웹 서버에 요청해야 하는데, 이를 HTTP 요청이라고 한다. 
• HTTP 요청을 받은 웹 서버는 해당 자원을 웹 브라우저에 보내 주는데, 이를 HTTP 응답이라고 한다.
• 그리고 웹 브라우저는 웹 서버에서 보내온 HTTP 응답 데이터를 사용자가 볼 수 있도록 웹 페이지 화면에 보여 주는데, 이를 렌더링이라고 한다.

 

어떤 웹 페이지가 처음 응답받은 자원을 렌더링한 뒤 다시 다른 자원을 요청하면, 과거에 렌더링한 내용을 모두 지운다. 그리고 새로 수신한 자원을 렌더링하는데 이 과정에서 웹 페이지는 약간의 깜빡임(새로 고침)이 생긴다. 웹 브라우저에서 주소 창으로 다양한 자원을 요청하는 방식으로 동작하는 웹 서버는 이런 깜빡임 현상을 피할 수 없다.

 

그런데 주소 창으로 요청하는 자원이 하나뿐이라면 이런 깜빡임은 일어나지 않는다. 리액트 프레임워크로 만드는 웹 애플리케이션은 index.html 파일 1개로 동작한다. 따라서 웹 서버에 자원을 한 번만 요청하므로 화면 깜빡임 현상이 발생하지 않는다.

 

즉, 리액트 프레임워크는 백엔드에서 받은 JSON 데이터를 해석하여 현재 화면에서 사용자가 새로 요청한 부분만 동적으로 화면을 생성한다. 이런 방식의 웹 애플리케이션을 싱글 페이지 애플리케이션(SPA)이라고 한다. 그리고 사용자 요청이 있을 때마다 완전히 새로운 HTML을 전달받는 기존 방식을 멀티 페이지 애플리케이션(MPA)이라고 한다. 따라서 리액트는 '싱글 페이지 애플리케이션을 만드는 프런트엔드 자바스크립트 프레임워크'이다.

 

 

2. 클라이언트에서 동작하는 템플릿 엔진

 

웹 서버는 대부분 HTML 템플릿 엔진을 제공한다. 템플릿 엔진은 HTML 문서를 DB 등에서 추출한 데이터와 결합하여 쉽게 만들어 준다. 그런데 프런트엔드에도 템플릿 엔진이 필요하다. 프런트엔드는 백엔드에서 제공하는 JSON 데이터를 해석하여 자바스크립트 객체들의 조합을 얻은 다음, 이 객체들을 다시 웹 브라우저가 이해할 수 있는 DOM 객체로 변환해줘야 한다.

즉, 서버 쪽 템플릿 엔진은 출력물은 HTML이지만, 프런트엔드 쪽 템플릿 엔진의 출력물은 DOM 객체들의 조합이라는 차이만 있을 뿐, 데이터와 템플릿을 조합하여 출력물을 만들어낸다는 동작 원리는 같다.

리액트, 앵귤러, 뷰 등 프런트엔드 프레임워크는 자바스크립트 객체를 DOM 객체로 변환해주는 역할을 수행한다는 공통점이 있다. 한마디로 프런트엔드 프레임워크란 클라이언트(웹 브라우저)에서 동작하는 템플릿 엔진이라고 말할 수 있다.