라우터를 알아보기 전!

• 기존의 웹 페이지에선 페이지 이동을 위해 index.html, about.html, contact.html 이런식으로 여러 페이지를 구성했어야 했다.

• 페이지 이동시 서버에서 전달 받아왔다. 그렇기 때문에 페이지가 새로고침이 되듯 새로운 페이지를 로드한다.

• 리액트는 SPA(Single Page Application)방식 이다.

기존의 웹페이지 방식과 다르게 페이지 이동시 로딩 없이 렌더링 하여 보여준다.

SPA(Single Page Application)란

• SPA의 경우 서버에서 제공하는 페이지가 한 개이다.

• 즉, 리액트에서 생성된 하나의 페이지 에서
  사용자가 원하는 여러 페이지를 보여줄 수 있다.
  브라우저 주소 상태에 따라 사용가 원하는 페이지를 보여준다.
  www.뭐시기.com/ 메인 페이지
  www.뭐시기.com/list 목록 페이지

• 사용자가 요청한 URL주소마다의 페이지 화면을 보여주는 것을 라우팅이라고 한다.
  쉽게 말해 페이지 이동이다.
  
  
  
  

React-Router (리액트 라우터)

• 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 (라우팅을 위한 라이브러리)

• 리액트에서는 라우팅 관련 라이브러리가 많지만, 대부분 React Router를 많이 사용한다.

• 리액트는 라우팅을 하기 위해 리액트 라우터 돔을 이용해서 새로운 페이지의 로딩없이 렌더링 하여 보여준다.

• 사용자에게 빠르고 편안한 경험을 줄 수 있다.
  
  
  
  

React Router의 컴포넌트

Routes 컴포넌트

• Routes 컴포넌트는 Route컴포넌트를 감싸기 위한 구성요소이다.
  
  
  

Route 컴포넌트

• path 속성에는 경로
• element 속성에는 컴포넌트 or html태그

<Routes>
  <Route path="/" element={} />
  <Route path="/detail" element={<Detail />} />
  <Route path="/about" element={<div>this page's about</div>} />
</Routes>

쉽게 3개의 page가 있다고 생각하면 된다.
"/" 경로는 main index.html일때 page
"detail"로 작명한 경우 www.어쩌고.com/detail과 같다.

LINK 컴포넌트

• 웹 페이지에서는 원래 링크를 걸때 a태그를 사용한다. 
  하지만 a태그는 클릭시 페이지를 새로 불러오기때문에 사용하지 않는다.
• 리액트에서는 Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만,
  History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

<Link to="/">홈으로</Link>
<Link to="/detail">상세페이지</Link>

to속성이 a태그의 href와 같다고 생각하면 된다.

위의 LINK 컴포넌트를 사용하지 않아도 페이지이동을 할 수 있다.

useNavigate()

• Link 컴포넌트를 사용하지 않고 주소를 조작할 수 있는 기능을 제공한다.
• useState같은 것을 hook이라고 한다. useNavigate도 마찬가지이다.
• navigate라는 변수에 담아 아래처럼 사용할 수 있다.

let navigate = useNavigate(); 
<button onClick={ () => { navigate('/detail') }}>상세페이지</button>

Link 컴포넌트와 useNavigate훅의 차이점

LINK

클릭시 페이지가 바로 이동 구현시 사용.

• ex) 상품 상세페이지
  
  
  

useNavigate

페이지 이동 전 어떤 코드나 로직에 의해 이동 되는 페이지가 달라질때

• ex) 장바구니 담기 click
  로그인 안했으면 로그인 페이지 이동
  로그인 했으면 장바구니 페이지 이동

nasted routes (중첩 라우팅)

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

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

만약 2뎁스 메뉴로 구성돼있다고 가정하면, 첫 번째 코드 보다 두 번째(중첩 라우팅) 코드를 사용한다.
/about/member로 접속 했을시 element속성 안 About컴포넌트 + Member 컴포넌트가 화면에 보여진다.

마지막으로 Outlet 컴포넌트를 사용 해주어야 한다.

Outlet 컴포넌트

부모 Route의 About 컴포넌트 안에 
<Outlet /> 으로 원하는 자손 컴포넌트 위치를 정해야한다.

function About() {
    return (
        <div>
            <h4> About~~ </h4>
            <Outlet></Outlet>
        </div>
    )
}

이렇게 하고나면,
about/member는 About + Member 컴포넌트가 적용된 화면을 보여준다.
about/lodaction은 About + location 컴포넌트가 적용된 화면을 보여준다.

Outlet으로 보여줄 컴포넌트를 가져오기 위해 구멍을 뚫어 놨다고 생각 하면 된다.