React SPA

Single Page Application의 약자로 한 개의 페이지로 이루어진 애플리케이션을 의미한다.

React SPA의 장점과 단점

장점

▶페이지 새로고침 없이 사용자와 상호작용할 수 있으며, 동적으로 컨텐츠를 업데이트 할 수 있다.사용자 경험을 향상시키고 빠른 응답성을 제공한다.

▶코드를 모듈화하고 재사용할 수 있습니다. 이로 인해 개발 생산성을 높일 수 있으며, 유지보수가 용이해진다.

▶가상 DOM을 사용하여 효율적인 UI 업데이트를 가능하게한다.
가상 DOM은 실제 DOM과 동기화되어 화면을 빠르게 업데이트할 수 있다.

▶대규모 애플리케이션의 개발에 적합한 확장성을 제공한다.
React 애플리케이션은 작은 컴포넌트로 구성되며, 필요에 따라 컴포넌트를 추가하거나 변경할 수 있다.

▶문제가 발생했을 때 도움을 얻을 수 있는 방법이 많다.

단점

▶React SPA는 초기에 모든 자원을 한 번에 로드해야해서 초기 로딩 속도가 느릴 수 있으며, 특히 큰 규모의 애플리케이션에서는 사용자가 페이지를 처음 방문할 때 시간이 오래 걸릴 수 있다.
->코드 스플리팅(Code Splitting), 레이지 로딩(Lazy Loading)과 같은 기술로 보완가능함.

▶검색 엔진에서 쉽게 크롤링되지 않을 수 있음.
-> 서버 사이드 렌더링(Server-Side Rendering),프리 렌더링(Pre-rendering)으로 해결 가능.

▶클라이언트 측에서 데이터를 처리하고 렌더링하기 때문에 보안에 취약할 수 있음.

React Router

React 애플리케이션에서 클라이언트 측 라우팅을 관리하기 위한 라이브러리를 말한다.
React Router를 사용하면 SPA에서 다중 페이지 기능을 구현할 수 있다.
주요 기능으로 URL 경로와 해당 경로에 맞는 컴포넌트를 매핑하고, 페이지 전환 및 URL 변경을 처리할 수 있다.

주요 컴포넌트

▶BrowserRouter: HTML5의 History API를 사용하여 클라이언트 측 라우팅을 지원하는 라우터.
서버가 모든 요청에 대해 동일한 HTML 파일을 반환하도록 구성해야 한다.
주소가 변경될 때마다 해당 URL에 맞는 컴포넌트를 렌더링한다.

▶Route: 특정 URL 경로에 대한 라우팅 규칙을 정의하는 컴포넌트. 경로와 일치할 때 해당 컴포넌트를 렌더링한다.

ex) <Route path="/about" component={About} />

▶Switch: 여러 개의 Route 컴포넌트 중에서 첫 번째로 일치하는 컴포넌트만 렌더링한다. 일치하는 경로가 없을 때 사용할 수 있는 404 페이지를 구현하는 데 유용하다.

▶Link: 페이지 간의 내비게이션을 가능하게 하는 컴포넌트.
클릭 시 지정된 경로로 이동하도록 한다.

ex) <Link to="/about">About</Link>

▶NavLink: 현재 활성화된 경로에 대해 스타일을 적용할 수 있는 Link 컴포넌트.
현재 경로와 매칭되는 경우 특정 스타일을 적용할 수 있다.