리액트(1) - SPA, 템플릿엔진

리액트 프레임워크는 가상 DOM과 JSX라는 새로운 방식을 동작하는 프레임워크다.

 

SPA란?

브라우저에서 서버로 요청을 보내고 서버는 요청에 맞는 데이터를 응답해줘서 응답한 데이터를 화면에 나타내는데 이것을 렌더링이라고 한다. 이렇게 화면에 나타내고 다음 요청에 대한 응답데이터를 또 받으면 그전에 렌더링 한 내용을 모두 지우는데 이때 깜박거림(새로고침)이 생긴다.  웹 브라우저에서 주소창으로 다양한 요청하는 방식은 깜박임 현상을 피할 수 없다.

깜박거리지 않으려면 요청하는 자원이 하나만 있어야한다. 리액트는 index.html파일 한개로 동작한다. 그래서 서버에 자원을 한 번만 요청해서 깜박이는 현상이 없는거다. 즉 백엔드에서 받은 json 데이터를 해석해서 화면의 새로 요청한 부분만 동적으로 화면을 생성한다. 이러한 방식을 Single Page Application이라고 한다. 기존에 사용자 요청이 있을때마다 새로운 html을 전달하는 방식은 Multi Page Application이라고 한다.

 

템플릿엔진

웹 서버에서 템플릿 엔진은 DG 혹은 API에서 가져온 데이터를 미리 정의 Template에 넣어 HTML을 만들어 클라이언트에게 전달해준다.

프론트에서 템플릿 엔진은 데이터를 받아서 DOM 객체에 동적으로 그려주는 역할을 한다.

서버에서는 출력물이 html이고 프론트에서는 DOM객체로 전환해준다. 공통점이 데이터와 템플릿을 조합하여 출력물을 만들어낸다는 것이다.
프론트엔드 프레임워크는 클라이언트에서 동작하는 템플릿엔진 이라고 말할 수 있다.