React Project 환경 셋팅 - Routes: React-router-dom@^6.3.0
렌더링 기술
리액트는 SPA(Single Page Application) 방식을 사용한다
실사간으로 웹사이트가 그려지는 과정, 이과정을 웹브라우저의 렌더링 과정이라고 한다.
SPA (Single Page Application)
하나의 페이지로 구성된 웹 어플리케이션 이다
웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 하고, 그 이후 새로운 페이지 요청 이 있을 때 페이지 갱신에 필요한 데이터만 전달받아서 페이지를 구성하는 방식이다.
클라이언트 관점에서 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신하는것이다. 필요한 부분만 갱신하기 떄문에 네이티브 앱에 가까운 자연스러운 페이지 이동(화면 깜박임 x)과 사용자 경험을 제공할 수 있다.
MPA (Multi Page Application)
새로운 페이지를 요청할 떄마다 서버에서 렌더링된 정적 리소스(HTML , CSS , JS ) 가 다운되는 전통적인 웹페이지 구성방식이다. 페이지를 이동하거나 새로고침하면 전체페이지를 다시 렌더링한다.
일반적으로
SPA에서는 렌더링 방식을CSR을,MPA에서는 렌더링 방식으로 SSR을 사용한다고 한다.
React , Vue , Angular 을 사용하여 SPA 을 만들고 특정한 방식을 가지고 렌더링 방식을 변경하지 않는다면 자연스럽게 CSR 을 사용하게 되고 PHP , JSP 로 MPA 을 만들면 자연스럽게 MPA 를 사용한다는 특징이 있다.
SPA가 CSR 이고 , MPA가 SSR 이라는 오해를 받기도 하지만 이 두개념은 페이지가 몇개냐 렌더링을 어디서 하냐에 따라 달라지는 다른개념이라고 한다.
CSR (Client Side Rendering)
클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다.
SSR(Server Side Rendering)
서버측에서 렌더링 하는방식 기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 하며 서버에서는 html , view 와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환한다.
SSG(Static Site Generation)
클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 파일을 단순히 반환하여 브라우저에서 뷰를 보여지게 된다.
서비스 성격에따라
유저랑 상호작용이 많고 고객 개인정보로 기준이 이루어지는 서비스라면 검색엔진 노출보다 고객의 데이터를 보호하는게 더좋요하면 CSR가 적합
회사 홈페이지이고 상위노출이 필요하고 누구에게나 항상 같은 내용을 보여줘야하고 매주 업데이트가 되어야한다면 SSR가 적합
위와 같지만 업데이트가 거의 필요하지않다면 SSG
만약 사용자에 따라 페이지 내용이 달라지며 화면 깜빡임 없는 빠른 인터렉션이 중요하고 상위노출이 필요하다면 CSR + SSR = Universal 렌더링을 고려해야 한다.
리액트 라우터 (React Router)
우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다.
라우팅
사용자가 요청한 URL 에 따라 해당 URL 에 맞는 페이지를 보여주는것인데 리액트에서는 관련 라이브러리가 많이 있지만, 이중 가장 많이 쓰이는 리액트 라우터(React Router)을 사용할것이다.
-
BrowserRouter: HTML5를 지원하는 브라우저의 주소를 감지 한다. -
HashRouter: 해시 주소를 감지 한다.
설치
npm i react-router-dom@^6.3.0다음처럼 기본 뎁스를 가진다.
해당하는 path 가 있으면 해당되는 Route 로 이동하고
그외 의도되지않는 path 라면 Navigate 로 리다이렉트
해주었다.
Routes
-
Routes컴포넌트는 여러Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다. -
Route는path속성에 경로,element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.
Layout and Dynamic Routes
- Nested Route 사용하여 다이나믹 라우팅 가능
- 부모 컴포넌트에
<Outlet />적절히 추가 - 자식 컴포넌트에
let params = useParams();사용하여 그 속성명으로 접근.
APP:
<Route path="dynamic-routes" element={<ParentComponent />}>
<Route path=":testId" element={<ChildComponents />} />
</Route>ParentComponent.tsx:
import { Outlet } from "react-router-dom";
const ParentComponent = () => {
return (
<div>
<h1>Sample Parent Component. Add number beyond url.</h1>
<Outlet />
</div>
)
}
export default ParentComponentChildComponent.tsx:
import { useParams } from "react-router-dom";
const ChildComponents = () => {
let params = useParams();
return (
<div>
<h2>ChildComponents</h2>
test id: { params.testId }
</div>
)
}
export default ChildComponents- 이렇게 접근하면 자식 컴포넌트
params.testId에 해당되는 아이디가 담긴다.
Link
- 웹 페이지는 원래 링크를 보여줄때 a태그를 사용한다.
하지만 a태그는 클릭시 페이지를 새로 불러오기 떄문에 사용하지 않는다.
- Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만, History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.
<Link to={"/"}>
<Button>이동 버튼</Button>
</Link>정리
리액트는 싱글페이지 어플리케이션이며 라우트 라이브러리를 사용한다.
렌더링 방식은 서비스에 따라 쓰는기술에 따라 달라질수도있다.
