[React] - SPA / React Router 는 무엇인가?

 

 

 

 

SPA 란?

• 기존에는 웹페이지를 미리 준비해두었다가, 로딩할 때 새 페이지를 서버 측에서 전달받아와 렌더링을 했었는데 규모가 커지고 사용자와의 상호작용이 많아짐에 따라서 속도 저하의 문제가 발생했다. 이를 해결하기 위한 것이 SPA(Single-Page Application)이다.
• SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웬애플리케이션이나 웹 사이트를 말합니다. 
• 정리하면 필요한 데이터만 받아와서 부분을 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹 사이트를 SPA라고 한다. 

 

SPA의 단점

• 첫 화면의 로딩 시간이 길다는 단점이 있다. 첫 화면 로딩 시 읽어들인 HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일 안에 들어있다보니 자연스럽게 JavaScript 파일이 무거워집니다. 때문에 이 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어집니다.
• 검색 엔진 최적화가 좋지 않다는 단점이 있다. 검색엔진이 리액트로만 이루어진 웹 사이트를 분석하기 어려운데 그 이유는 HTML 내에는 거의 정보가 없기 때문에 여기사 충분한 정보를 얻지 못해서이다. 다만 검색엔진이 발전하고 있어 이런 단점은 사라지는 추세이다.  

 

React에서 컴포넌트를 어떻게 나누어야 하는가?

• 페이지를 먼저 만들기보다는 어떤 컴포넌트를 만들고 이들을 조합할지부터 계획을 구상해야한다.
• 컴포넌트가 UI의 필수 요소란 정의도 맞고, 각자 고유의 기능을 가지고 있다는 정의도 맞다. 하지만 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계해야 한다. 

 

React Router 란?

• 리액트 SPA에서는 경로에 따라 다른 뷰를 보여줄 수 있다. 즉 라우팅에 따라서 다른 뷰를 보여줄 수 있고, 이 때 사용하는 라이브러리가 React Router이다.
• 라우팅이란 다른 주소에 따라 다른 뷰를 보여주는 과정이다. SPA라도 각각 다른 페이지 뷰를 가지고 있는데, 이 화면들에 주소를 부여하고 경로를 변경하여 다르게 표시할 수 있다.

 

React Router 주요 컴포넌트 

React Router 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 

• 라우터 역할을 하는 BrowserRouter
  :컴포넌트의 최상위에 작성되어 React Router의 컴포넌트를 활용할 수 있도록 한다. 
  
  
• 경로를 매칭해주는 Routes와 Route
  : Routes 컴포넌트 안에 Route 컴포넌트들을 작성한다. Routes 컴포넌트가 경로가 일치하는 하나의 Route만 렌더링한다.
  Route 컴포넌트 안에는 path 속성과 element 속성이 존재하는데, 이것이 경로와 그 경로에 일치하는 컴포넌트를 의미한다.
  
  
• 경로를 변경하는 역할 Link
  : Link 내의 to 속성에 알맞은 경로를 위치시켜 이동 시킨다.
   <a> 요소는 페이지를 전환하는 과정에서 페이지를 불러오기 떄문에 다시 처음부터 렌더링을 시킨다. 
   하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.