React에서의 Render와 SPA (Single Page Application) 개념
Render
- Render의 개념
Render는 React에서 컴포넌트를 사용자 인터페이스(UI)에 표시하는 과정을 말합니다. React의 핵심 기능 중 하나로, Virtual DOM을 사용하여 효율적으로 UI를 업데이트하는 방식이 주요 특징입니다.
-
Virtual DOM: React는 UI 변경 사항을 추적하기 위해 실제 DOM이 아닌 Virtual DOM을 사용합니다. Virtual DOM은 메모리 내에서 가상으로 존재하는 DOM으로, 상태(state)나 속성(props)이 변경될 때마다 React는 Virtual DOM을 업데이트합니다.
-
Diffing Algorithm: 상태가 업데이트되면 React는 변경된 Virtual DOM과 이전 Virtual DOM을 비교(diff)하여 변경된 부분만을 실제 DOM에 반영합니다. 이를 통해 브라우저의 리렌더링 성능을 최적화하고, 불필요한 DOM 조작을 줄입니다.
-
Render 과정
- Initial Render: 애플리케이션이 처음 로드될 때, React는 모든 컴포넌트를 Virtual DOM에 그린 후 실제 DOM에 반영합니다.
- Re-render: 컴포넌트의 상태나 속성이 변경되면 React는 해당 컴포넌트를 다시 렌더링하고, 차이점을 Virtual DOM에서 계산한 후, 필요한 부분만 실제 DOM에 업데이트합니다.
SPA
- SPA (Single Page Application) 개념
Single Page Application (SPA)는 하나의 HTML 페이지를 기반으로 동작하며, 페이지의 전환이나 업데이트 시에 전체 페이지를 다시 로드하지 않고 필요한 부분만 동적으로 업데이트하는 웹 애플리케이션입니다. React는 SPA를 만드는 데 최적화된 프레임워크 중 하나입니다.
- 기본 개념
- SPA는 사용자가 사이트를 탐색할 때 페이지 전체를 새로고침하지 않고, JavaScript를 사용하여 콘텐츠를 동적으로 로드합니다.
- URL 변경 시 서버로 요청을 보내는 대신, 브라우저 히스토리를 조작하여 페이지 전환을 처리하고, 필요한 데이터는 API 요청을 통해 가져옵니다.
- 장점
- 빠른 사용자 경험: 페이지 이동 시 전체 페이지를 새로 고치지 않기 때문에, 기존의 서버 사이드 렌더링보다 더 빠른 사용자 경험을 제공합니다.
- 리소스 효율성: 한 번 로드된 자원들은 캐시에 저장되어, 이후의 요청에서는 재사용되므로 리소스 사용이 최적화됩니다.
- 모바일 친화적: 모바일 환경에서의 성능이 향상되며, 웹 애플리케이션과 유사한 사용자 경험을 제공합니다.
- 단점
- SEO 문제: SPA는 초기 페이지 로드 시 콘텐츠가 즉시 로드되지 않기 때문에, 검색 엔진 크롤러가 페이지를 제대로 인덱싱하지 못할 수 있습니다. 이를 해결하기 위해 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 사용하기도 합니다.
- 초기 로드 시간: 애플리케이션의 모든 자원이 초기 로드 시 한꺼번에 다운로드되기 때문에, 로딩 시간이 다소 길어질 수 있습니다.
React와 SPA의 관계
React는 컴포넌트 기반 아키텍처를 사용하여 SPA를 효율적으로 관리할 수 있게 합니다. 각각의 컴포넌트가 독립적으로 상태와 UI를 관리하기 때문에, 대규모 애플리케이션에서도 코드 재사용성과 유지 보수성이 높습니다. React Router와 같은 라이브러리를 사용하여 URL과 컴포넌트 매핑을 관리하고, SPA 내에서 페이지 전환을 쉽게 처리할 수 있습니다.
이러한 이유로 React는 SPA 개발에 매우 적합한 도구로 널리 사용되고 있습니다.
