[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 8일차 - 리액트 라우터

 

 

---

React-router-dom에 대한 이론적인 공부가 필요한 것 같아 여러 강의와 블로그를 참고하여 라우터를 이해하려고 한다.

 

 

React Routing 이해하기

리액트가 나오기 전 브라우저가 서버에 요청을 하면 URL로 해당페이지에 대한 것을 서버에서 보내는 형식이었다면.
리액트로 넘어오면서 Single Page Application(SPA)로 서버로부터 전체 묶음을 받아온 후에 클라이언트(Browser) URL에 따라 어떤 것을 보여줄지 결정하는 형식으로 변경되었다. 

 

SPA 라우팅 과정

1. 브라우저에서 최초에 '/'로 요청
2. React web app을 내려준다
3. 내려받은 React App에서 '/' 경로에 맞는 컴포넌트를 보여줌
4. React app에서 다른 페이지로 이동하는 동작을 수행
5. 새로운 경로에 맞는 컴포넌트를 보여줌

React는 컴포넌트를 작성하고 컴포넌트를 효율적으로 Render하는 것에 치중
React Router는 브라우저에 있는 어떤 URL과 어떤 컴포넌트를 보여줄 것인지에 대한 로직이 필요한데 그런 일을 하는 라이브러리

 

특정 경로에서 보여줄 컴포넌트
'/' => Home
'/profile' => Profile
'/about' => About

 

 

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="/about" element={<About />} />
      </Routes> 
    </Router>
  );
}

export default App;

 

라우팅(Routing)이란?

사용자가 어떤 주소로 들어왔을 때, 그 주소(url)에 해당되는 적당한 page를 사용자에게 보내주는 것

 

Router

{BrowserRouter}는 React-router-dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 wraper 컴포넌트

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

<Router>
  <Routes>
  <Route path="/" element={<Home />} />
  <Route path="/profile" element={<Profile />} />
  <Route path="/about" element={<About />} />
  </Routes> 
</Router>

 

Route

URL에 따라 달라져야할 컴포넌트를 Route로 감싸주고 path로 경로 지정.
path="/"는 사용자가 웹사이트에 아무런 path를 지정하지 않고 들어왔을 때 라우팅 되는 것을 말한다.

만약, 사용자가 존재하지 않는 Page로 들어왔을 때 설정해 주는 방법은 path="/*"이다.

<Route path="/*" element={<NotFound />} />

 여기서 *는 '와일드카드문자'로써 '전체'를 의미,
즉, path가 정해져 있지 않은 경로를 입력하면 모두 NotFound 페이지 나타남 

 

Link

Link 컴포넌트로 a태그를 교체.
herf를 to로 교체.

<Link to="/about">About</Link>

 

NavLink

Link와 유사하지만 부가적인 기능이 추가되어있음. NavLink로 변경 후 클릭 시 class="active" 생성

NavLink 활용법 : 사용자가 현재 페이지를 직관적으로 이해할 수 있게 내비게이션에 사용자의 위치를 표현가능.

import { Link, NavLink } from "react-router-dom";

export default function Navigation() {

  return (
    <>
    <ul>
      <li><NavLink to="/">HOME</NavLink></li>
      <li><NavLink to="/profile">Profile</NavLink></li>
      <li><NavLink to="/about">About</NavLink></li>
    </ul>
    </>
  );
}

.active{
  font-weight: 800;
  text-decoration: none;
}

활성화된 NavLInk에 class가 추가되면서 style이 입혀졌다.

 

Nested Routing (중첩라우팅) 

중첩 라우팅이란 기본페이지가 아닌 페이지 내부에서도 라우트가 필요한 경우가 있다. 예를 들어 서브 페이지 같은 경우.

 

<Route path="/topic/*" element={<Topic />} />

Topic 내에 작성된 내비게이션을 클릭하면 Topic의 내용 자체가 전부 사라지게 되는데, 이를 막기 위해 여러 라우팅을 매칭하고 싶을 경우 function App 내에서 <Route path='/topic/*' element={<Topics />}></Route> 이렇게 path 뒤에 *을 붙여주면 된다. 부모 컨포넌트 라우드에 *를 붙여 하위 라우팅을 탐색할 수 있게 만들어준다.

방식에는 여러 가지가 있지만 내가 시도해 본 두 개의 방식이 있다. 위의 코드를 인용하자면 라우터 페이지에서 하위 라우팅을 탐색할 수 있게 *로 작성하고 하위 엘리먼트인 Topic에 라우터를 작성하는 방법이다.

 

Topic.jsx

import { NavLink, Routes, Route } from "react-router-dom";
import TopicItem from "./TopicItem";



export default function Topic() {

  const contents =[
    {id:1, title:'HTML', description:'HTML is ...'},
    {id:2, title:'JS', description:'JS is ...'},
    {id:3, title:'React', description:'React is ...'},
  ]

  const lis = [];
  for(let i=0; i<contents.length; i++){
    lis.push(
      <li><NavLink to={'/topic/'+contents[i].id}>{contents[i].title}</NavLink></li>
    );
  }

  return (
    <div>
    <h2>Topics</h2>
      <ul>
        {lis}
      </ul>
      <Routes>
           <Route path=":topic_id" element={<TopicItem />} />
     </Routes>
    </div>
    
  );
}

 

두 번째 방법은 <Outlet> 컴포넌트를 활용하는 것이다. 우선 라우터 모음 코드에 넣고 Topic컴포넌트에 가서 <Outlet /> 넣어주면 작동을 잘한다.

 

<Route path="/topic/*" element={<Topic />} >
	<Route path=":topic_id" element={<TopicItem />} />
</Route>

import { NavLink, Outlet } from "react-router-dom";



export default function Topic() {

  const contents =[
    {id:1, title:'HTML', description:'HTML is ...'},
    {id:2, title:'JS', description:'JS is ...'},
    {id:3, title:'React', description:'React is ...'},
  ]

  const lis = [];
  for(let i=0; i<contents.length; i++){
    lis.push(
      <li><NavLink to={'/topic/'+contents[i].id}>{contents[i].title}</NavLink></li>
    );
  }

  return (
    <div>
    <h2>Topics</h2>
      <ul>
        {lis}
      </ul>
      <Outlet />
    </div>
    
  );
}

 

 

이해가 안 가는 점

이제 Topic에서 TopicItem으로 contents 데이터를 넘기고 싶은데 생각이 안 난다. 다시 무비앱을 보면서 적용해봐야겠다.
추가로 outlet 컴포넌트로 보내면서 데이터도 보내지는지 궁금하다. 

 

 

느낀 점

강의를 정리하는 과정에서 궁금한 것이 계속 증가된다. 하지만 라우팅은 사실 아직 어렵다. 특히 중첩할 때 데이터를 보내는 방법을 찾아보고 직접 정리해 보는 과정이 필요할 것 같다.

 

 

 

 

---

* 유데미 큐레이션 바로가기 : https://bit.ly/3ZpMIP7
* STARTERS 취업 부트캠프 공식 블로그 : https://blog.naver.com/udemy-wjtb

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.