리액트 홈페이지를 클론하려던 중 라우팅방법을 이해하기 위한 SPA에 대한 지식이 부족한것 같아 알아보게 되었다.
SPA ?
- 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다.
- 뷰 렌더링을 사용자의 브라우저가 담당하게 하고 , 우선 애플리케이션을 브라우저에 불러와 실행시킨 후 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다.
- 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용
Q. 왜사용해요 ?
기존페이지는 다른페이지로 이동할 때마다 새로운 html을 받아오고 , 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다.
하지만 매번 새로운 화면을 보여주면 성능상의 문제가 발생할 수 있다. (트래픽이 많이 나온다던지, 사용자가 몰리면 서버에 부하가 쉽게 걸린다던지...)
또한 바뀌지 않는 부분까지 새로불러와 보여주어 불필요한 로딩도 있을 수 있다.
따라서, 이런 문제를 해결하기 위해 SPA를 사용!
Q. 그럼 페이지가 하나밖에 없어요?
아니다.
서버에서 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저 주소상태에 따라 다양한 화면을 보여 줄 수 있다.
Q. 그럼 주소에 따라 다른 화면을 보여주는것은 어떻게 해야해요?
▷ 이것이 바로 라우팅!
라우팅에 대한 간단한 설명
- 다른주소에 다른화면을 보여주는 것이다.
- 리액트 라이브러리 자체에 내장되어 있는 기능은 아니고, 브라우저 API를 직접사용하여 관리하거나, 라이브러리를 사용하여 구현한다.
- 리액트 라우팅 라이브러리는 react-router , reach-router , Next.js 등여러가지가 있다.
( 내가 현재 사용할 라이브러리는 react-router이다! )
- react-router는 클라이언트 사이드(CSR)에서 이루어지는 라우팅을 아주 간단하게 구현하게 해준다.
- react-router는 서버사이드 렌더링(SSR)을 할 때도 라우팅을 도와주는 컴포넌트들을 제공한다.
SSR와 CSR은 다음 포스팅에서 다루겠다.
Q. 그럼 SPA의 단점은 없나요?
있다.
- SPA는 초기 구동시 사이트구성과 관련된 모든 리소스를 한 번에 받아오기 때문에 속도가 상대적으로 느리다. 또한 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다. (하나의 HTML 파일을 제외하고 모두 자바스크립트 파일이기 때문이다.)
▷하지만 코드 스플리팅을 사용해 라우트별로 파일을 나누어 트래픽과 로딩속도를 개선 할 수 있다.
- 자바스크립트를 실행하지 않는 일반 크롤러에서는 페이지 정보를 제대로 수집해 가지 못하는 단점이 있다. 또한 자바스크립트가 실행될 때까지 페이지가 흰페이지로 나타날수도 있다.
▷ 이러한 문제점을 SSR (서버사이드렌더링) 을 통해 해결 할 수있다.
웹 크롤러란 ?
- 자동화된 방법으로 WWW를 탐색하는 컴퓨터 프로그램
- 구글등의 검색엔진이 이용하는 프로그램의 총칭이다.
다음 포스팅에서 라우팅의 사용법 , 그리고 SSR,CSR와 SEO의 연관성을 다루어 보겠다.
'FE > REACT' 카테고리의 다른 글
| [React] Context란 무엇이고 어떻게 사용할까? (Context API 그리고 관련 Hook) (0) | 2022.06.15 |
|---|---|
| [React - Hook] useRef가 뭘까 ? 어떻게 사용하지 ? (예제) (0) | 2022.06.14 |
| [React] 자바스크립트 안에 스타일을 선언하는 방법 (CSS-in-JS) (0) | 2022.06.11 |
| [React - Hook] useEffect을 사용해 시계만들기 (0) | 2022.06.09 |
| [React] useState에서 사용하는 State는 정확히 무엇을 말하는걸까? (2) | 2022.06.09 |