React - navigate, nested routes, outlet

리액트 폴더구조

리액트는 html을 만들어주는 라이브러리 입니다.

그래서 만들 파일들은 95%확률로 .js 파일이기 때문에 

비슷한 .js 파일끼리 한 폴더에 묶어놓으면 그게 좋은 폴더구조입니다. 

 

컴포넌트 역할하는 js 파일은 components 폴더에 묶고 페이지 역할하는 js파일은 routes아니면 pages폴더에 묶고 

자주쓰는 함수가 들어 있는 js 파일은 utils폴더에 묶으면 됩니다. 즉 알아서 필요할 때마다 폴더를 만들면됩니다.

 

우선 상단에 아래와 같이 import 합니다. 

import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'

 

useNavigate()

페이지 이동은 Link 써도 된다고 했는데 그게 별로이면 useNavigate()를 사용합니다. 

useNavigate()를 쓰면 유용한 함수가 제공됩니다. 페이지를 이동시켜주는 함수입니다. 

navgate('/detail')이런 코드가 실행되면 /detail페이지로 이동가능합니다. navigate(2) 숫자 넣으면 앞으로가기,

뒤로가기 기능개발도 가능합니다.( -1은 뒤로 1번가기, 2는 앞으로 2번가기) 

function App(){
  let navigate = useNavigate()
  
  return (
    (생략)
    <button onClick={()=>{ navigate('/detail') }}>이동버튼</button>
  )
}

 

 

 

404페이지

유저가 이상한 경로로 접속했을 때 "없는 페이지입니다"라고 보여주고 싶으면 

<Route path="*" element={ <div>없는페이지임</div> } />

다음과 같이 하면됩니다. * 경로는 모든 경로를 뜻해서 위에 만들어둔 /detail 이런게 아닌 이상한 페이지 접속시

*경로로 안내해줍니다.

 

 

nested routes

/about/member로 접속하면 회사멤버 소개하는 페이지 

/about/loaction으로 접속하면 회사위치 소개하는 페이지 

를 만들고 싶으면 다음과 같이 작성했습니다. 

<Route path="/about/member" element={ <div>멤버들</div> } />
<Route path="/about/location" element={ <div>회사위치</div> } />

 

nested routes를 사용하면 아래와 같이 만들면됩니다. 

<Route path="/about" element={ <About/> } >  
  <Route path="member" element={ <div>멤버들</div> } />
  <Route path="location" element={ <div>회사위치</div> } />
</Route>

 

<Route>안에 <Route>를 넣을 수 있는데 이걸 Nested routes라고 부릅니다.

저렇게 쓰면 /about/member로 접속시 <About>&<div>멤버들</div>를 보여줍니다. 

그리고 /about/locat으로 접속시 <About>&<div>회사위치</div>를 보여줍니다. 

 

하지만 실행시켜보면 <div>..<div>가 보이지 않습니다. 

이유는 About컴포넌트 안에 <div>를 어디다 보여줄지 표기해야 잘보여줍니다.

function About(){
  return (
    <div>
      <h4>about페이지임</h4>
      <Outlet></Outlet>
    </div>
  )
}

위에서 import해온 <Outlet>은 nested routes안의 element들을 어디에 보여줄지 표기하는 곳입니다. 

그래서 이렇게 해두면 

/about/member로 접속시 Outlet자리에 아까의 <div> 박스들이 잘 보입니다. 그래서 유사한 서브페이지들이 많이 필요하다면 이렇게 만들어도 됩니다. 

 

about접속햇을때 

 

about location 접속했을때 

방금 만든것들을 보면 페이지 url을 바꿀 때 마다 각각 다른 UI를 보여주는데

이것도 동적인 UI만드는 방법 중 하나입니다. 

그래서 라우터를 써도 동적인 UI를 만들 수 있습니다. (라우터쓰면 뒤로가기 버튼을 이용가능하다는 장점)