패스트캠퍼스 데브캠프 44일차 [React, Route]

Su Min·2024년 7월 22일

React 라우팅 패스트캠퍼스 데브캠프

패스트캠퍼스 데브캠프

목록 보기

41/68

🔗 react-router-dom

React로 생성된 SPA로 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다. react-router-dom을 사용하면 웹, 앱에서 컴포넌트 기반 라우팅을 용이하게하여 동적 라우팅을 구현 할 수 있다.

설치

npm install react-router-dom

사용 방법 (6.4이전 버전)
react-router-dom에서 browserRouter를 가져온 다음 루트 구성요소를 그 안에 래핑한다.

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

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<MainPage />} />
          <Route path="login" element={<LoginPage />} />
          <Route path="/note/:id" element={<NoteDetail />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </Router>
  )
}

export default App

🔗 모듈

BrowserRouter

history API(pushState, replaceState, popstate이벤트)를 사용하여
UI를 URL과 동기화된 상태로 유지해준다.

routes

Routes는 앱에서 생성될 모든 개별 경로에 대한 컨테이너/ 상위 역할을 하고 routes로 생성된 자식 컴포넌트 중에서 현재 location과 매칭되는 첫번째 route를 렌더링 해준다.

route

route는 단일 경로를 만드는데 사용되며 속성으로 path 혹은 index 와 element를 갖는다.
path 속성은 원하는 컴포넌트의 url경로를 지정한다. 경로 이름이 백슬레시/인 컴포넌트는 웹이 처음 로드 될 때마다 먼저 렌더링 되고, 경로 이름이 *인 컴포넌트는 라우팅이 지정된 주소 외에 모든 것으로 이동되어 예외처리를 가능하게 한다.
index 속성은 불리언 값으로 true값을 반환하여 path가 /인 부모컴포넌트의 자식컴포넌트로 렌더링 된다.
Element 속성은 경로에 맞게 렌더링되어야하는 컴포넌트를 지정한다.

`<Link />` 경로 이동

Link 구성요소는 HTML의 a태그와 유사하며 Link의 to 속성은 해당 경로 이름으로 컴포넌트의 구성요소를 렌더링한다.

<Link to="/">
  <span>Home</span>
</Link>

Home 클릭시 to속성의 경로인 컴포넌트로 이동된다.

a 태그는 화면 전체를 리렌더링하지만 Link 태그는 리렌더링을 방지하는 등의 기능이 포함되어 있다.

중첩라우팅

복잡한 레이아웃 코드를 중첩해서 사용한다.

 <Route path="/note" element={<NotePage />}>
   <Route index element={<NoteList />} />
 </Route>

/note 주소로 이동할 경우 NotePage컴포넌트의 자식요소로 NoteList컴포넌트도 렌더링된다. 부모요소인 NotePage에 하위 라우팅이 생기면 컴포넌트를 렌더링 할 자리를 명시해주어야하는데 이때 사용되는 것이 Outlet 컴포넌트이다.

Outlet

자식 경로 요소를 렌더링하려면 부모 경로 요소에서 <Outlet>을 사용해야한다. 이렇게하면 하위 경로가 렌더링될때 중첩된 UI가 표시 될 수 있다. 부모라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하지만 인덱스 라우트가 없으면 아무것도 렌더링하지 않는다.

import { Outlet } from "react-router-dom"

export default function NotePage() {
  return (
    <>
      <p>이곳은 Note Page 입니다.</p>
      <Outlet />
    </>
  )
}

🔗 react-router-dom Hooks

useNavigate

article요소를 클릭했을 때 이동을 하고 싶다면 Link태그로 감싸는 것이 아닌 useNavigate Hook을 사용하여 특정 이벤트가 발생했을 때 경로를 바꿔 줄 수 있다.

import useNavigate from "react-router-dom"

export default function NotePage() {
  
  const navigate = useNavigate()
  
  const onClick = () => {
  	navigate('/home')
  }
  
  return (
    <>
      <p>이곳은 Note Page 입니다.</p>
      <button onClick={onClick}>돌아가기</button>
    </>
  )
}

navigate에 replace 속성의 값으로 true로 설정하면 이동 후 뒤로가기가 불가능해진다.

navigate('/home', { replace: true })

navigate에 state 속성의 값으로 이동시킬 페이지에 함께 보낼 데이터를 보낼 수 있다.

navigate('/home', { state: { userId: user.id } })

useLocation

이 Hooks는 현재 위치의 객체를 반환한다. 현재 위치가 변경 될 때마다 일부 side effect를 수행하려는 경우에 유용 할 수 있다.

import { useLocation } from "react-router-dom"
.
.
  const location = useLocation()
  
  useEffect(() => {
    console.log(location) 
  }, [location])
.
.

console에 출력되는 값에서 원하는 정보를 추출하여 사용 할 수 있다.

useNavigate의 두번째 인자로 state 속성의 값으로 데이터를 전달 받았다면 받은 데이터는 location의 state 프로퍼티에 담겨있어 꺼내어 사용 할 수 있다.

import { useLocation } from "react-router-dom"
.
.
  const location = useLocation()
  
  const [ userId, setUserId ] = useState(location.state?.userId)
.
.

Params

경로에 특정 데이터를 넣어 전달하는 것을 말하며 path경로에 : 문법을 사용하였다면 useParams Hook으로 읽을 수 있다.

<Route path="/note/:id" element={<NoteDetail />} />

url이 http://localhost:5173/note/2 라면 path 값에 :으로 구분해준 id값은 파라미터로 전달되어 NoteDetail 컴포넌트 내부에서 useParams Hook을 통해 id값을 추출하고 사용 할 수 있다.

import { useParams } from "react-router-dom"

const NoteDetail = () => {
  let { id } = useParams()
  
  return (
    <>
      <p>당신의 { id }번째 노트입니다.</p> 
    </>
  )
}
// 당신의 2번째 노트입니다.
export default NoteDetail

해당 url에서 전달된 값은 2가 된다.

Su Min

성장하는 과정에서 성취감을 통해 희열을 느낍니다⚡️

이전 포스트

패스트캠퍼스 데브캠프 : 김민태의 프론트앤드 개발 1기 43일차 [토이프로젝트 I ]

다음 포스트

패스트캠퍼스 데브캠프 44일차 [React, Route]