[React] 리액트 프레임워크 이해하기

리액트란?

 2013년에 페이스북에서 발표한 오픈소스 자바스크립트 프론트 프레임워크이다.  프론트 개발영역에 속하며 가상 DOM(document object model), JSX(Javascript XML)라는 새로운 방식으로 동작한다.  2022년도에는 vue가 일시적으로 점유율이 높은 것으로 파악 되었으나, 이는 코로나 사태의 빠른 비대면 서비스를 만들기 위해선 vue를 도입할 수 밖에 없었던 상황으로 이해된다.

리액트, 앵귤러, 뷰 동향 비교 (www.npmtrends.com)

SPA(single page application)란?

 싱글 페이지 애플리케이션은 하나의 페이지를 사용하는 애플리케이션이다.  즉 SPA는 웹 서버로부터 새로운 페이지를 매번 불러오지 않고 하나의 페이지만을 사용한다.  리액트로 구성된 웹 애플리케이션은 index.html 파일 1개로만 동작을 한다.  그러므로 화면전환이 발생하지 않고 백앤드에서 반환(response)받은 데이터를 통해 새로 요청한 부분만 동적으로 화면을 생성해 준다.

 

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

 웹 서버는 대부분 HTML 템플릿 엔진을 제공한다.  템플릿 엔진은 HTML문서를 DB 등에서 추출한 데이터와 결합하여 클라이언트(브라우저)에 보여준다.  리액트는 백앤드에서 제공하는 반환 값을 해석해 자바스크립트 객체들의 조합을 얻어 클라이언트가 이해할 수 있는 DOM 객체로 변환한다.