리액트를 다루는 기술 - 리액트 라우터로 SPA 개발하기

웹 애플리케이션에서 라우팅이란?

라우팅 : 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것

 

여러 페이지로 구성된 웹 애플리케이션을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다.

 

리액트 라우터, Next.js 리엑트에서 라우팅 시스템을 구축할 수 있습니다.

- 리액트 라우터 : 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다.

- Next.js : 리액트 프로젝트의 프레임워크, 이 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동

라우팅 관련 기능은 리액트 라이브러리에서 공식적으로 지원하는 것이 아닌 서드 파티로 제공됩니다.

* 서드 파티란?

편하고 효율적인 개발을 위해, 플러그인이나 라이브러리 또는 프레임워크로, 제작사에서 만든것이 아니라 다른 업체에서 만든 해당 툴 지원 라이브러리.

---

 

싱글 페이지 애플리케이션

: 하나의 페이지로 이루어진 애플리케이션

이렇게 html은 한 번 만 받아와서 웹 애플리케이션을 실행시킨 후, 필요한 데이터만 받아와 화면에 업데이트하는것

↔ 멀티 페이지 애플리케이션 : 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 css, js, 이미지 파일 등의 리소스를 전달받아 브라우저에 보여줌.

각 페이지마다 다른 html 파일을 만들어서 제공하거나 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용

 

 

사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션의 경우, 새로운 페이지를 보여줘야 할 때마다 서버측에서 부담을 줌.

-> 그래서 리액트를 사용해 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트하는 방식을 사용하게 됐습니다. (필요한 데이터만 새로 불러와 사용)

 

다른 페이지로 이동할 때 서버에 다른 페이지의 html을 새로 요청하는 것이 아닌,

브라우저의 History API를 사용해 브라우저의 주소창의 값만 변경하고

기존에 페이지에 띄웠던 웹 애플리케이션은 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주게 됩니다.

---

<BrowserRouter>

프로젝트에 리액트 라우터를 적용할댄 BrowserRouter라는 컴포넌트를 사용해 감싸면 됩니다.

이 컴포넌트는 웹 애플리케이션에 HTML5의 Histroy API를 사용하여 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해줍니다.

 

<Route> 컴포넌트

: 특정 경로(주소)에 원하는 컴포넌트 보여주기

<Route path="주소 규칙" elemet={보여 줄 컴포넌트 JSX}/>   

<Route path="/about" element={<About />} />

 

<Link> 컴포넌트

: 다른 페이지로 이동하는 링크 보여주기

리액트 라우터를 사용하는 프로젝트에서는 <a> 태그를 바로 사용하면 안된다.

왜냐하면 <a> 태그로 페이지를 이동시, 브라우저에서는 페이지를 새로 불러오기 때문이다.

Link 컴포넌트도 <a>태그를 사용하긴 하지만,

페이지를 새로 불러오는 것을 막고, Histroy API를 통해 브라우저 주소의 경로만 바뀌는 기능을 가지고 있다.

<Link to="경로"> 링크 이름</Link>   

<Link to="/about"> 소개 </Link> 

 

---

URL 파라미터와 쿼리스트링

페이지 주소를 정의할 때 가끔은 유동적인 값을 사용합니다.

 

- URL 파라미터

: 주소의 경로에 유동적인 값을 넣는 형태, 주로 ID또는 이름을 사용하여 특정 데이터를 조회할 때 사용

- 쿼리스트링

: 주소의 뒷부분에 ' ? '문자열 이후에 key=value로 값을 정의하며 &로 구분하는 형태, 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

 

- URL 파라미터

useParams : 이 Hook을 사용해 객체 형태로 조회할 수 있습니다.

 

Profile.js import { useParams } from "react-router-dom"; const data = {   velopert: {     name: "김민준",     description: "리액트를 좋아하는 개발자",   },   gildong: {     name: "홍길동",     description: "고전 소설 주인공",   }, }; const Profile = () => {   /* URL 파라미터는 useParams라는 Hook을 사용해 객체 형태로 조회 가능 */   const params = useParams();   /*username URL 파라미터를 통하여 프로필을 조회*/   const profile = data[params.username];   console.log("profile", profile); /* 'veloper' or 'gildong' */   return (     <div>       <h1>사용자 프로필</h1>       {profile ? (         <div>           <h2>{profile.name}</h2>           <p>{profile.description}</p>         </div>       ) : (         <p>존재하지 않는 프로필입니다.</p>       )}     </div>   ); }; export default Profile;

App.js import { Route, Routes } from "react-router-dom"; import "./App.css"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; function App() {   return (     <Routes>         <Route index element={<Home />} />         {/* URL 파라미터의 이름은 라우터를 설정할 때 Route 컴포넌트의 path props를 통해 설정 */}         <Route path="/profiles/:username" element={<Profile />} />             </Routes>   ); } export default App;

Home.js import { Link } from "react-router-dom"; const Home = () => {   return (     <div>       <ul>         <li>           <Link to="/about">소개</Link>         </li>         <li>           <Link to="/profiles/velopert">velopert의 프로필</Link>         </li>         <li>           <Link to="/profiles/gildong">gildong의 프로필</Link>         </li>         <li>           <Link to="/profiles/void">존재하지 않는 프로필</Link>         </li>         <li>           <Link to="/articles">게시글 목록</Link>         </li>       </ul>     </div>   ); }; export default Home;

- 쿼리스트링

useSearchParams라는 이 Hook을 통해, 문자열을 분리한 뒤 key와 value로 파싱할 수 있습니다.

useSearchParams는 배열 타입의 값을 반환,

첫 번째 원소(searchParams)는 쿼리파라미터를 조회(get)*수정(set)하는 메서드들이 담긴 객체 반환

만약 조회 시 쿼리파라미터가 존재하지 않는다면 -> null로 조회됨.
두번째 원소(setSearchParams)는 쿼리파라미터를 객체 형태로 업데이트 할 수 있는 함수를 반환

About.js import { useSearchParams } from "react-router-dom"; const About = () => {   const [searchParams, setSearchParams] = useSearchParams();   const detail = searchParams.get("detail");   const mode = searchParams.get("mode");   const onToggleDetail = () => {     setSearchParams({ mode, detail: detail === "true" ? false : true });   };   const onIncreaseMode = () => {     const nextMode = mode === null ? 1 : parseInt(mode) + 1;     setSearchParams({ mode: nextMode, detail });   };   return (     <div>       <h1>소개</h1>       <p>리액트 라우터를 사용해 보는 프로젝트입니다.</p>       <p>detail: {detail}</p>       <p>mode: {mode}</p>       <button onClick={onToggleDetail}> toggle detail</button>       <button onClick={onIncreaseMode}> increase mode</button>     </div>   ); }; export default About;

---

중첩된 라우트

중첩된 라우트를 통해 공통 레이아웃 컴포넌트로, 페이지끼리 공통적으로 보여줘야 하는 레이아웃을 표현할 수도 있다.

중첩된 라우트는 컴포넌트를 한번만 사용해도 된다는 장점이 있다.

 

<Outlet> 컴포넌트

: Route의 children으로 들어가는 JSX 엘리먼트를 보여주는 역할

 

index props

이 props는 path="/"와 동일한 의미를 가진다.

Layout.js import { Outlet } from "react-router-dom"; const Layout = () => {   return (     <div>       <header style={{ background: "lightgreen", padding: 16, fontSize: 24 }}>         <button onClick={goBack}>뒤로가기</button>         <button onClick={goArticle}>게시글로 가기</button>       </header>       <main>         <Outlet />       </main>     </div>   ); }; export default Layout;

App.js import { Route, Routes } from "react-router-dom"; import "./App.css"; import About from "./pages/About"; import Article from "./pages/Article"; import Articles from "./pages/Articles"; import Home from "./pages/Home"; import Layout from "./pages/Layout"; import Profile from "./pages/Profile"; function App() {   return (     <Routes>       <Route element={<Layout />}>         <Route index element={<Home />} />         <Route path="/about" element={<About />} />         <Route path="/profiles/:username" element={<Profile />} />         <Route path="/articles" element={<Articles />}>           <Route path="/articles/:id" element={<Article />} />         </Route>       </Route>     </Routes>   ); } export default App;

 

---

리엑트 라우터 부가기능

 

1. useNavigate 

: Link 컴포넌트를 사용하지 않고 다른 페이지로 이동하는 상황에 사용하는 Hook

 

+ replace props

: 이 옵션을 사용하면 페이지를 이동할 때 현재 페이지를 페이지 기록에 남기지 않습니다.

→ 뒤로 가기를 눌렀을때 navigation(-2)

import { Outlet, useNavigate } from "react-router-dom"; const Layout = () => {   const navigation = useNavigate();   const goBack = () => {     // 뒤로가기     navigation(-1);    };   const goArticle = () => {     // articles 경로로 이동     navigation("/articles", { replace: true });   };   return (     <div>       <header style={{ background: "lightgreen", padding: 16, fontSize: 24 }}>         <button onClick={goBack}>뒤로가기</button>         <button onClick={goArticle}>게시글로 가기</button>       </header>       <main>         <Outlet />       </main>     </div>   ); }; export default Layout;

 

2. <NavLink> 컴포넌트

: 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 or CSS 클래스(className)를 적용한다.

이 컴포넌트의 style과 className는 { isActive? boolean } 을 파라미터로 전달받는 함수 타입의 값을 전달한다.

Articles .js import { Outlet, NavLink } from "react-router-dom"; const Articles = () => {   const activeStyle = {     color: "green",     fontSize: "24px",   };   return (     <div>       <Outlet />       <ul>         <li>           <NavLink             to="/articles/1"             style={({ isActive }) => (isActive ? activeStyle : undefined)}           >             게시글1           </NavLink>         </li>         <li>           <NavLink             to="/articles/2"             style={({ isActive }) => (isActive ? activeStyle : undefined)}           >             게시글2           </NavLink>         </li>         <li>           <NavLink             to="/articles/3"             style={({ isActive }) => (isActive ? activeStyle : undefined)}           >             게시글3           </NavLink>         </li>       </ul>     </div>   ); }; export default Articles;

 

3. NotFound 페이지 만들기

: 이 페이지는 사전에 정의되지 않는 경로에 사용자가 진입했을 때 보여주는 페이지

NotFound.js const NotFound = () => {   return (     <div       style={{         display: "flex",         alignItems: "center",         justifycontents: "center",         fontSize: 64,         position: "absolute",         width: "100%",         height: "100%",       }}     >       404 error     </div>   ); }; export default NotFound;

App.js import { Route, Routes } from "react-router-dom"; import "./App.css"; import Home from "./pages/Home"; import Layout from "./pages/Layout"; import NotFound from "./pages/NotFound"; function App() {   return (     <Routes>       <Route element={<Layout />}>         <Route index element={<Home />} />       <Route path="*" element={<NotFound />} />     </Routes>   ); } export default App;

*는 wildcard 문자로, 아무 텍스트나 매칭한다는 뜻

이 라우트 엘리먼트 상단에 위치하는 라우트들의 규칙을 모두 확인하고, 일치하는 라우트가 없다면 이 라우트가 화면에 나타남.

 

4. <Navigate> 컴포넌트

: 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동. (즉, 페이지를 리다이렉트하고 싶을 때 사용한다.)

EX ) 로그인이 필요한 페이지인데 로그인을 안 했다면, 로그인 페이지로 이동하기

Login.js const Login = () => {   return <div>로그인 페이지</div>; }; export default Login;

App.js import { Route, Routes } from "react-router-dom"; import "./App.css"; import Home from "./pages/Home"; import Layout from "./pages/Layout"; import Login from "./pages/Login"; import MyPage from "./pages/MyPage";   function App() {   return (     <Routes>       <Route element={<Layout />}>         <Route index element={<Home />} />       <Route path="/login" element={<Login />} />       <Route path="/mypage" element={<MyPage />} />     </Routes>   ); } export default App;

MyPage.js import { Navigate } from "react-router-dom"; const MyPage = () => {   const isLogin = false;   if (!isLogin) {     return <Navigate to="/login" replace={true} />;   }   return <div> 마이페이지</div>; }; export default MyPage;

---

리엑트 라우터를 사용하여 주소 경로에 따라 다양한 페이지를 보여 주는 방법을 학습했습니다.

웹 브라우저에서 사용할 컴포넌트, 상태 관리를 하는 로직, 그 외 여러 기능을 구현하는 함수들이 점점 쌓이면서 최종 결과물인 자바스크립트 파일의 크기가 매우 커집니다.

코드 스플리팅 (이후에 배울 내용)

: 라우트에 따라 필요한 컴포넌트만 불러오고, 다른 컴포넌트는 다른 페이지로 이동하는 등 필요한 시점에 불러오는 효율적인 방법