React

React란?

자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨. SPA나 모바일 애플리케이션 개발에 사용 가능. 

 

SPA는?

• Single Page Application
• 웹 애플리케이션 또는 웹사이트의 한 형태로, 사용자와의 상호작용이 단일 HTML 페이지에서 발생하는 구조
• 페이지를 다시 로드하지 않고 동적으로 콘텐츠를 업데이트

SPA 작동 원리

1. 초기 로딩
   
   • 사용자가 SPA에 처음 접속하면, 웹 서버는 단일 HTML 페이지를 로드. 이 페이지는 필요한 JavaScript, CSS 기타 리소스를 포함
2. 동적 콘텐츠 로딩 
   • 사용자가 애플리케이션 내에서 상호작용할 때, JavaScript는 서버로부터 데이터를 비동기적으로 요청하고 (JSON등을 통해), 이 데이터를 사용하여 페이지의 콘텐츠를 동적으로 업데이트.
   • 페이지 전체를 다시 로드할 필요가 없음
3. URL 변경
   • 사용자가 다른 섹션으로 이동할 때, SPA는 브라우저의 URL을 변경할 수 있지만, 페이지 전체를 새로 로드하지는 않는다. 이는 HTML5의 History API를 통해 관리

동적 콘텐츠 로딩?

• SPA에서 동적 콘텐츠 로딩은 주로 AJAX 또는 Fetch API를 사용하여 이루어짐.
• 이들은 웹 페이지가 서버와 비동기적으로 통신하고, 페이지를 새로 고침하지 않고도 필요한 데이터를 로드하고 렌더링하는데 사용

동적 콘텐츠 로딩 과정

1. 사용자 상호작용 발생
   
   • 사용자가 웹 애플리케이션 내에서 특정 작업을 수행(버튼 클릭, 링크 클릭)
2. JavaScript 요청 발생
   • 사용자의 상호작용에 대응하여, JavaScript 코드가 서버에 데이터 요청을 보냄
   • AJAX : 'XMLHttpRequest' 객체를 사용하여 서버에 요청을 보내고 응답 받음(이 방식보다는 axios 통신으로 주로 대체하여 사용)
   • Fetch API : 더 현대적이고 강력한 방식으로, 'fetch' 함수를 사용하여 리소스를 비동기적으로 가져옴
3. 서버 응답 처리
   • 서버는 요청을 처리하고, 필요한 데이터(주로 JSON)를 응답으로 보냄
4. 클라이언트 사이드에서의 응답 처리
   • 클라이언트 즉 JavaScript는 서버로부터 받은 응답을 처리.
   • 데이터를 가져와서 웹 페이지의 특정 부분만을 업데이트
5. DOM 조작
   • JavaScript는 받은 데이터를 사용하여 DOM(Document Object Model)을 동적으로 조작
   • 페이지의 특정 부분만 새롭게 렌더링하는 것을 의미, 전체 페이지의 새로고침은 발생하지 않음.
6. 사용자 인터페이스 업데이트
   • 결과적으로, 사용자가 보는 페이지의 일부분만이 새로운 데이터로 업데이트.
7. SPA의 예시
   1. 소셜 미디어 피드에서 새로운 게시물을 불러옴.
   2. 사용자가 "더보기" 버튼을 클릭하면 JavaScript는 서버에 새 게시물 데이터를 요청
   3. 서버는 요청을 처리하고 새 게시물 데이터를 JSON 형식으로 응답
   4. 클라이언트 사이트의 JavaScript는 이 데이터를 받아 피드에 새 게시물을 추가

SPA의 장점

• 빠른 상호작용
  
  • 모든 리소스가 초기에 로드된 후, 콘텐츠는 클라이언트 사이드에서 동적으로 업데이트.
  • 이로 인해 사용자와의 상호작용이 빨라짐.
• 서버 부하 감소
  
  • 서버는 전체 페이지가 아닌 데이터만 전송하므로, 서버 부하가 감소
• 향상된 사용자 경험
  • 전체 페이지를 다시 로드하는 것보다 빠르고 부드러운 전환으로 사용자 경험이 개선
• 프론트엔드와 백엔드의 분리
  • 백엔드는 데이터를 제공하는 API 역할을 하고, 프론트엔드는 UI와 사용자 경험을 관리.
  • 이로 인해 개발이 더 모듈화되고 관리하기 쉬워짐.

SPA 단점

• SEO 최적화 어려움
  
  • 전통적인 SPA는 검색 엔진 최적화(SEO)에 어려움을 겪을 수 있다.
  • 초기 콘텐츠가 적기 때문에
• 초기 로딩 시간
  • 필요한 모든 스크립트와 리소스를 처음에 로드해야 하므로 초기 로딩 시간이 길어질 수 있다.

React vs Vue

React

• 생태계와 커뮤니티
  
  • React는 페이스북에 의해 유지 관리되고, 매우 크고 활발한 커뮤니티를 가지고 있다
  • 다양한 라이브러리와 도구가 있어 개발자가 필요로 하는 거의 모든 것을 찾을 수 있다.
• 재사용 가능한 컴포넌트
  • React의 주요 특징 중 하나는 재사용 가능한 컴포넌트
  • 대규모 애플리케이션에서 코드의 일관성과 유지 보수성을 향상시킴
• 가상 DOM
  • 가상 DOM을 사용하여 효율적인 UI 업데이트와 빠른 렌더링을 제공
• 유연성
  • React는 라이브러리이므로 다른 도구와 쉽게 통합할 수 있으며, 개발자가 스택의 다른 부분에 대해 더 많은 결정을 내릴 수 있게 해줌

Vue

• 쉬운 학습 곡선
• 선언적 렌더링
  • Vue 역시 선언적 렌더링과 컴포넌트 기반의 접근 방식
• 문서화
  • 문서화가 매우 잘 돼 있으며, 개발자가 빠르게 문제를 해결하고 학습할 수 있도록 도와줌
• 경량
  • 경량이면서 강력한 기능을 제공하며, 빠르고 유연한 애플리케이션 개발에 적합

그렇다면 React를 선택한 이유는?

• 엄청난 크기의 커뮤니티와 이미 산업 내에서 널리 사용되고 있는 라이브러리. 이로 인해 많은 학습 자료와 필요한 정보들을 얻기 쉽다.
• 컴포넌트 기반 아키텍쳐
  
  • React는 단방향 데이터 흐름, 상태 관리의 중요성 때문에 재사용 가능한 컴포넌트의 개발에 강한 강조점을 두고 있다.
  • Vue는 양방향 데이터 바인딩(v-model)을 지원함. 개발에 편리할 순 있지만, 복잡한 애플리케이션에서는 데이터 흐름을 추적하기 힘들수도 있음.
  • 따라서 컴포넌트 간의 데이터 흐름을 관리하는데 있어 재사용 가능한 컴포넌트를 통해 복잡한 UI를 구축할 수 있게함
• React Native를 통한 모바일 앱 개발
  • React를 사용하는 개발자들은 React Native를 통해 웹과 유사한 방식으로 네이티브 모바일 애플리케이션을 개발할 수 있음.