ReactJS 입문: React 소개와 프로젝트 생성

01. ReactJS

React.js 개요

• 공식 홈페이지 소개
  • React는 UI를 구축하기 위한 라이브러리입니다. 웹과 네이티브 앱 모두 지원합니다. 공식 홈페이지에서 자세한 정보를 확인할 수 있습니다.
• 프레임워크와 라이브러리의 차이
  • 프레임워크는 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 자원을 제공하는 기술 조합입니다. 예: Spring, Vue.js, Django.
  • 라이브러리는 특정 기능을 모듈화한 프로그램의 집합으로, React.js는 UI 구성에 집중하며 다른 도구와의 결합을 지원합니다.
• React.js가 라이브러리인 이유
  • React는 UI를 렌더링하는데 집중하며, 상태 관리나 라우팅 등은 다른 라이브러리를 통해 처리합니다. 이로 인해 React는 프레임워크라기보다는 라이브러리로 분류됩니다.

React.js의 특징과 장점

• SPA (Single Page Application)
  • SPA는 하나의 페이지로 구성된 애플리케이션입니다. 페이지 전환 없이 데이터를 동적으로 업데이트하여 사용자 경험을 개선합니다.
• 인기
  • npm trends에서 React의 인기는 매우 높습니다. 이는 React의 넓은 커뮤니티와 많은 사용자를 반영합니다.
• 다양한 활용
  • React는 웹뿐만 아니라 모바일 앱 개발(React Native)과 VR에서도 사용될 수 있습니다.
• 강력한 커뮤니티
  • React는 활발한 커뮤니티와 많은 채용 기회를 제공하며, 다양한 정보와 지원을 받을 수 있습니다.

02. SPA의 개념

SPA와 MPA

• MPA (Multi Page Application)
  • 여러 페이지로 구성된 애플리케이션입니다. 서버는 각 페이지를 새로 만들어 클라이언트에 전송합니다. SSR (Server Side Rendering)은 서버에서 HTML 페이지를 생성하여 브라우저에 전송하는 방식입니다.
• SPA (Single Page Application)
  • 하나의 HTML 페이지로 구성되어 있으며, 필요한 데이터만 서버로부터 받아와 동적으로 UI를 업데이트합니다. 이는 사용자 경험을 개선하고 페이지 전환 없이 매끄러운 인터랙션을 제공합니다.

SPA의 동작 원리

• 요청과 응답
  • 클라이언트가 필요한 데이터만 요청하고, 서버는 JSON 형태로 응답합니다. 클라이언트는 이 데이터를 바탕으로 UI를 업데이트합니다.
• CSR (Client Side Rendering)
  • 브라우저에서 화면을 렌더링합니다. 서버는 초기 HTML 파일만 제공하고, 이후 데이터와 UI 업데이트는 클라이언트에서 처리합니다.

03. Routing

Routing 개념

• Routing이란
  • 사용자가 웹 애플리케이션 내에서 페이지를 이동할 수 있도록 하는 기술입니다. 페이지를 변경할 때 URL이 업데이트되며, 이를 통해 사용자에게 다른 콘텐츠를 보여줄 수 있습니다.

Hashed Routing

• 해시 라우팅
  • URL의 해시(#) 값을 사용하여 페이지를 이동하는 기술입니다. 예를 들어, http://example.com/#about은 클라이언트에서 페이지를 업데이트합니다. 해시 값은 서버에 요청되지 않고, 클라이언트에서만 처리됩니다.
  • Brower Routing이 더 보편적 (사용자에게 더 깔끔한 느낌을 줌) ex) http://example.com/about
• React.js에서의 처리
  • React는 Browser Routing을 사용하여 더 깔끔한 URL 구조를 제공합니다. 그러나 SPA 아키텍처를 유지하면서 하나의 HTML 파일만 요청하고, 클라이언트 측에서 라우팅과 렌더링을 처리합니다.