React - Study

페이지 나누기 (navigate, nested routers, outlet)

컴포넌트 폴더 나누기

React 폴더구조는 대부분 JS 파일이다. 비슷한 폴더끼리 ex: routes , components , pages 로 만들어서 넣어주면 된다.
(🕵️ 주의 할 점은 파일을 옮기다가 import 경로가 바뀌니까 잘 확인 해야한다.)

---

useNavigate

🕵️ useNavigate는 페이지 이동을 도와주는 hook(유용한 함수를 담은) 이다.

사용법은 기존의 react-router-dom 을 import 했던 부분에서 useNavigate를 추가해주면 된다.
👉 import { Routes, Route, Link, useNavigate } from 'react-router-dom'

기존의 <Link/>태그는 a와 비슷해서 지저분하기도 태그전체를 바꿔야하는 부분도 있기 때문에 함수형인 useNavigate를 사용하기도 한다. 사용시 변수로 지정해놓고 사용한다. let navigate = useNavigate();

Example

<Nav className="me-auto">
    <Nav.Link href="#home">Home</Nav.Link>
    <Nav.Link href="#detail">Detail</Nav.Link>
</Nav>

이렇게 만들어진 Nav가 있다. useNavigate를 사용하려면 href를 지우고 onClick을 사용하고 위에서 만든 변수인 navigate를 넣어준다. ( ) 안에는 "/경로"를 입력한다.

<Nav.Link onClick={()=>{navigate('/detail')}}>Detail</Nav.Link> 

위에 있는 Home로 가고싶으면 어떻게 해야할까?

<Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link> 

홈화면으로 가니까 "/"로 적고 만들면 된다.

useNavigate 또 다른 기능

• onClick={()=>{navigate(1)} : 괄호안에 1은 앞으로 한페이지 이동
• onClick={()=>{navigate(-1)} : 괄호안에 -1은 뒤로 한페이지 이동 (뒤로가기 버튼)

---

404 페이지만들기

사용자가 링크의 주소를 잘못입력하거나 없는 페이지경로를 입력했을때 404페이지를 나타나게 해서 "이 페이지는 없는 페이지 입니다." 라고 안내할 수 있다.

<Route path="*" element={<div>없는페이지입니다.</div>}/>

위와 같이 path="*"를 입력하면 ( * : 그외에 오타포함 모든것 ) 없는 페이지의 오타로 url을 입력하면 설정한 페이지가 뜬다. 보통 404 error나 없는 페이지라고 안내하는 페이지로 사용한다.

---

Nested Routes

페이지를 만들 때 예를 들어 About 페이지만 있다면 상관없지만 About안에 member 도 있고 location 이 들어있다고 하면

Example 01

<Route path="/about" element={<About/>}/>
<Route path="/about/member" element={<Member/>}/>
<Route path="/about/location" element={<Location/>}/>

이렇게 작성하여 페이지를 구성한다.

Example 02

<Route path="/about" element={<Detail/>}>
	<Route path="/member" element={<Member/>}/>
	<Route path="/location" element={<Location/>}/>
</Route>

이렇게 /about 안에 이렇게 담아주어도 된다. 이 문법이 Nested Routes 라고 한다. ( 태그안에 태그가 들어간 )

Nested Routes 의 장점

1. Routes관리가 수월하고 좋다s
2. nested router 접속시엔 element가 2개나 보인다.

<Route path="/about" element={<About/>}>
	<Route path="/about/member" element={<div>멤버</div>}/>
	<Route path="/about/location" element={<Detail/>}/>
</Route>

이렇게 작성하고 2개가 같이 보여줄 곳에 Outlet 을 사용한다.

function About(){
  return(
    <div>
      <h4>회사정보</h4>
      <Outlet></Outlet>
    </div>
  )
}

---

🕵️ nested routers는 언제 사용하냐면 여러 유사한 페이지가 필요할 때 사용된다.

---