2024.05.13

첫 리액트 입문

React

• 웹과 네이티브 UI를 위한 라이브러리
• SPA 라이브러리
  📌 SPA(Single Page Application) - 한 개의 페이지로 이루어진 애플리케이션

Framework & Library

Framework

• 기능 구현에 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합
  ex). spring, Vue.js, Nest.js, Django, Flask 등

Library

• 공통 기능의 모듈화가 이루어진 프로그램의 집합
  ex). React.js, react-router-dom, redux 등

SPA & MPA

SPA - Single Page Application

하나의 페이지로 이루어진 애플리케이션

• React, Vue, Angular 등

SPA 동작원리

1. (요청) 서버에 데이터를 요청한다
2. (응답) 서버는 클라이언트의 요청을 처리한 후 필요한 데이터를 JSON 형태로 클라이언트에게 전송한다
3. (렌더링) 응답받은 JSON 데이터는 클라이언트의 JS가 처리하고 이를 기반으로 DOM을 업데이트 한다
   💡 CSR(Client Side Rendering) - 서버측이 아닌 클라이언트에서 데이터를 기반으로 렌더링 하는것

MPA - Multi Page Application

2개 이상의 페이지로 구성된 애플리케이션

MPA 동작원리

1. (요청) 클라이언트에서 서버에 응답을 요청한다
2. (생성) 서버에서는 요청에 따라 새로운 HTML파일을 생성한다
3. (응답) 새로 생성된 HTML파일을 클라이언트에게 보낸다
   💡 SSR(Server Side Rendering) - 서버에서 완성된 HTML 페이지를 만들어 브라우저에게 전송하는 방식