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

리액트(React)란?

오픈소스 자바스크립트 프레임워크로,

가상 DOM(Document object model)과 JSX(Javascript XML)라는 방식으로 동작한다.

 

** 프론트엔드 개발 : 웹 브라우저를 대상으로 사용자에게 보여지는 부분

** 백엔드개발 : 프론트에서 요구하는 데이터를 제공(서버 등)

 

리액트 = 프론트엔드 JS 프레임워크

 

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

** 웹 서버 : 웹 브라우저가 HTTP 프로토콜을 통해 요청하는 다양한 유형의 자원을 제공

** 랜더링(rendering) : 웹 서버에서 보내온 HTTP 응답 데이터를 사용자가 볼 수 있도록 웹 페이지 화면에 보여줌

멀티 페이지 애플리케이션(MPA)

웹 페이지는 처음 응답받은 자원을 랜더링한 뒤 사용자가 다시 다른 자원을 요청하면,

과거 랜더링 내용을 모두 지우고, 새롭게 랜더링하는 과정에서 깜빡임(새로고침) 발생한다.

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

하지만, 요청하는 자원이 하나라면 깜빡임이 발생하지 않는다.

리액트로 만드는 웹앱은 index.html 파일 1개로 동작하기에 깜빡임이 발생하지 않는다.

백엔드에서 받은 JSON 데이터를 해석해 사용자가 새로 요청한 부분만 동적으로 화면을 생성한다.

 

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

웹 서버는 대부분 템플릿 엔진을 통해 HTML 문서를 DB등에서 추출한 데이터와 결합해 쉽게 페이지를 생성하게 해준다.

 

프론트엔드에도 템플릿 엔진이 필요하다.

백엔드에서 제공하는 JSON 데이터를 해석해 JS객체들의 조합을 얻은 다음,

이 객체들을 다시 웹브라우저가 이해할 수 있는 DOM객체로 변환해 주어야 한다.

 

** 서버의 템플릿 엔진의 출력물 : HTML

** 프론트의 템플릿 엔진의 출력물 : DOM 객체들의 조합

 

 

출처 : Do it! 리액트로 웹앱만들기 with 타입스크립트

https://product.kyobobook.co.kr/detail/S000212754474

Do it! 리액트로 웹앱 만들기 with 타입스크립트 | 전예홍 - 교보문고