웹서비스가 하나의 페이지로만 구성되어 있으면 여러 가지 서비스를 제공하기 어려운 부분이 존재할 수 있기 때문에 필요시 여러 페이지로 구성해야 할 수 도 있습니다.
이때 여러 페이지로 구성된 웹 서비스가 브라우저의 페이지 전환에 대한 지식도 중요하기 때문에 Page Routing에 대해 간략하게 살펴보겠습니다.
우선 Routing 이란 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정을 의미합니다.
친구와 카카오톡으로 대화를 주고 받는 상황을 예를 들어보겠습니다.
사용자가 친구에게 톡을 전송했을 때 해당 톡(데이터)은 친구에게 직통으로 전송되지 않고 네트워크 장치를 거쳐서 친구에게 도착하게 됩니다.
이때 네트워크 장치는 해당 톡(데이터)이 어디로 이동해야 되는 지를 안내해주게 되며, 이렇게 데이터가 이동해야되는 경로를 지정해주는 네트워크 장치를 Router라고 합니다.
정리를 해보면 Router는 데이터 경로를 실시간으로 지정해주는 역할을 하는 장치이고, Routing은 데이터 경로를 지정해주는 행위 자체가 되겠습니다.
그럼 Page Routing은 무엇을 의미하는지 살펴보겠습니다.
인터넷을 사용해 웹사이트에 접속을 한다는 것은 브라우저를 통해서 웹서버에 경로 요청을 하고 웹 문서를 받아 보는 과정입니다.
만약 웹사이트에 /home이라는 경로를 요청하게 되면 웹 서버가 브라우저를 통해 Home.html 문서를 보내주어 해당 페이지에 접속이 가능하게 됩니다.
같은 맥락에서 Page Routing을 정리할 수 있습니다.
Page Routing 이란 요청에 따라 어떤 페이지를 보여줄지 결정하는 행위를 의미합니다.
만약 /home이란 request(요청)이 들어오면 웹 서버는 경로에 알맞은 페이지인 Home.html을 보여주게 될 것입니다.
이렇게 요청에 명시되어 있는 경로에 따라 알맞는 페이지를 선택하여 보여주는 과정 자체를 Page Routing이라고 합니다.
이 때 웹서버는 요청이 들어오면 경로에 맞는 페이지를 보여주게 되는데 이것을 Multipage Application(MPA)이라고 합니다.
MPA의 경우 경로에 따른 페이지를 보여주는 과정에서 새로고침과 같은 과정을 통해 페이지 전환을 하게 됩니다.
하지만 React는 MPA가 아닌 Singlepage Application(SPA), 즉 페이지가 1 개인 간단한 애플리케이션 방식을 사용합니다.
SPA 방식은 Home 페이지를 요청해도 index.html을 반환하고, 상세 페이지를 요청해도 index.html을 반환하게 됩니다.
그렇다고 React가 여러 페이지를 사용할 수 없는 것이 아닙니다.
SPA 방식을 사용하는 React의 경우 React만의 방식으로 여러 페이지를 사용할 수 있도록 구현이 가능합니다.
React 경우 어떠한 요청이 들어와도 SPA 방식을 사용하기 때문에 항상 index.html을 반환하게 되며 동시에 React App을 넘겨주게 됩니다.
이 상태에서 사용자가 post라는 페이지로 이동하고 싶어서 버튼을 클릭했을 때 웹 서버에 post라는 페이지를 요청하는 것이 아니라 React App이 스스로 페이지를 업데이트 시켜주게 됩니다.
즉 페이지 이동이 웹 서버와 통신을 해야 페이지 전환이 가능했던 기존 방식과 달리 그냥 브라우저가 React App을 통해 알아서 업데이트를 시켜주기 때문에 서버 대기시간 없이 빠른 페이지 전환이 가능하며, 데이터가 필요한 경우 서버와 데이터 요청과 응답만 주고받게 됩니다.
그리고 이렇게 SPA에서 브라우저, 즉 클라이언트 측에서 스스로 페이지를 렌더링하는 방식을 Client Side Rendering(CSR)이라고 합니다.
이제 React에서 Page Routing 하는 방법을 살펴보도록 하겠습니다.
Page Routing을 하기 위해서는 react-router라는 라이브러리를 이용해주어야 합니다.
npm i react-router-dom@6
우선 위의 명령어를 입력하여 라이브러리를 다운로드합니다.
(@6은 버전 6을 의미합니다.)
다음으로 Page Routing 작업을 할 파일을 생성해줍니다.
이제 생성한 페이지를 특정 주소에 연결해서 Page Routing을 하기 위해
브라우저의 URL과 React App을 연결하는 기능을 하는 BrowserRouter를 사용해줍니다.
다음으로 Page 역할을 할 4개의 컴포넌트를 import 해주고 브라우저의 URL이 바뀌게 되면 어떤 컴포넌트를 렌더링 해서 해당 컴포넌트가 페이지 역할을 하게 할 것인지 설정해줍니다.
페이지 전환, 즉 바뀔 부분을 Routes로 감싸줍니다.
그다음 Routes 안에 Route 컴포넌트를 생성해줍니다.
Route컴포넌트는 실질적으로 URL 경로와 컴포넌트를 맵핑해주는 역할을 수행해주게 됩니다.
<Route path="/" element={<Home />} />
위의 Route컴포넌트는 path(경로)가 “ /. “ (인덱스) 일인덱스)일 때 Home 컴포넌트를 매핑해주는 역할을 합니다.
이렇게 Home 컴포넌트가 렌더링 된것을 확인할 수 있습니다.
나머지 페이지 역할을 할 컴포넌트들도 경로와 매핑해줍니다.
여기까지 하면 해당 URL로 들어가면 매핑된 컴포넌트가 렌더링되는 것을 확인할 수 있습니다.
다음으로 링크를 걸어 해당 링크를 클릭했을 때 페이지 전환이 일어나는 작업을 해보겠습니다.
(별도의 컴포넌트를 생성하여 해당 컴포넌트 안에서 Link를 사용했습니다.)
a태그의 경우 클릭했을 때 새로고침이 되면서 해당 페이지로 전환되는 MPA방식입니다.
SPA 방식의 React에서는 a태그 대신 Link를 사용해주시면 됩니다.
a태그의 href처럼 Link에서는 to를 사용하여 경로를 연결해줍니다.
결과를 확인해보면 해당 Link를 클릭할 때마다 페이지 전환이 일어나고 Routes 컴포넌트로 감싸 져 있는 부분에
각 경로에 매핑된 컴포넌트가 렌더링되는 것을 확인할 수 있습니다.
또한 Page Routing을 할 때 컴포넌트가 변경되는 것을 확인할 수 있습니다.
즉 정확히 말하면 페이지 전환이 되는 것이 아니라 컴포넌트를 갈아 끼우고 URL을 변경하여 마치 페이지가 전환된 것과 같은 경험을 사용자에게 전달하는 방식이라 생각하면 됩니다.
이렇게 컴포넌트를 교체 방식으로 페이지 전환이 일어난 것처럼 동작하기 때문에 깜빡임 없이 빠른 속도의 전환이 가능하게 됩니다.
'React' 카테고리의 다른 글
| 사용자 입력값 유효성 검사 (0) | 2022.11.01 |
|---|---|
| Custom Hooks (0) | 2022.10.23 |
| useEffect (0) | 2022.10.14 |
| Memoization(React.memo, useMemo, useCallback) (2) | 2022.10.11 |
| useContext (0) | 2022.10.09 |
