[React.js] React-Router-DOM

를 갈아치워서 보여준다.
그리고 그 작업을 쉽게 도와주는게 react-router-dom !!

그리고 이것이 일반 a태그를 사용하는 것과는 다르게 페이지 전체를 로딩하지 않기 때문에 SPA를 통해 사용자 경험 향상을 목적으로 하는것이다. 일명 그 화면 깜빡이는 페이지 전환없이 부드럽게 전환됨

그럼 왜 굳이 React-router-DOM을 사용해야 하는가?

걍 SPA 안에서 모든 페이지를 다 렌더링해주는 형식으로 만들면 안되냐? 는 의문이 들 수 있다.

그 방식은 다양한 문제를 야기하는데.. 대부분은 컨텐츠는 변화되어도 url이 고정되어 있다는데서 야기된다.

1. 특정 페이지 즐겨찾기 등록 불가 -> 화면 전환이 되어도 url은 고정이기에 내가 원하는 특정 페이지를 등록할 수 없다.
2. 뒤로가기, 새로고침 불가 -> 해당 SPA에 url이 하나이기에 뒤로가기를 누르면 이전에 보던 다른 웹사이트로 가고, 새로고침을 누르면 맨 처음의 렌더링 페이지가 나온다.
3. SEO -> 검색 엔진에 의해 원치 않는 방식으로 색인될 가능성이 있다

Router의 종류

1. HashRouter

URL의 해쉬(#)값을 이용하는 라우터이다.

1. 주소에 해쉬(#)가 붙는다.
2. 검색 엔진이 읽지 못한다( ㅡㅡ )
3. 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. 이는 해시 라우터가 해쉬(#) 뒤의 값은 브라우저에서만 관리하고 서버는 기본 url로 서버에 데이터를 요청하기 때문이다 ==> 바꿔 말하면 서버는 라우팅하는 사실을 모른다
4. history API를 사용하지 않기 때문에 동적 페이지에 불리하다.

2. BrowserRouter

1. history API를 사용한다. 즉, 페이지 방문 이력관리가 있기에 동적 페이징에 유리하다.
2. 별도의 서버 설정이 없다면 새로고침 시 404 에러가 발생한다.
   = > 서버에서는 기본 라우트 '/'에 대한 정보만 저장, 이외의 모든 하위 라우팅은 이 default 경로를 통해 이루어지기 때문에 이 경로를 제외하고는 서버에서 인식을 못한다. 그래서 필요하다면 해당 주소와 그에 맞는 페이지를 서버에 알려주어야 한다.(배포할때 많이 에러가 나는 부분)
3. 큰 프로젝트에 적합하다.
   ** history API는 스택 형태로 사용자가 방문한 url기록들을 stack 형태로 저장해둔다.

React-Router-DOM 사용

1. 설치
2. 세팅

index.js

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

app.js

import { Routes, Route, Link, useNavigate, Outlet } from "react-router-dom";
  
      <Routes>
        <Route path="/about" element={<About />}>
          <Route path="member" element={<div>멤버임</div>}></Route>
          <Route path="location" element={<About />}></Route>
        </Route>
        <Route path="/event" element={<Event />}>
          <Route
            path="one"
            element={<div>첫 주문시 양배추즙 서비스</div>}
          ></Route>
          <Route path="two" element={<div>생일기념 쿠폰받기</div>}></Route>
        </Route>
        <Route path="*" element={<div>404pages</div>}></Route>
      </Routes>

Routes 태그안에 필요한 Route 페이지들을 기술해준다.

navigate

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

navigate를 사용해 간단히 이동가능

404 pages

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

path 설정을 *으로하면 설정된 페이지 이외의 모든 페이지다. 즉 유효하지 않은 페이지로 접근 시 보여줄 화면을 설정해주기에 용이하다.

nested routes & outlet

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

저렇게 Route 안에 Route를 중첩하게 되면
실제론 /about/member로 접속하면 about의 내용과 member의 내용이 함께 출현한다. 허나 about 내에 member 경로기 때문에 member가 about내의 어디에 표현될지를 정해야 하는데

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

저렇게 Outlet을 사용하여 여기에 표현해줘! 를 기술한다.

URL Parameter

상세페이지같은거 100만개면 Route 페이지 100만개 만들 순 없지않나.
그럴때 URL Parameter를 통해 여러개 생성 가능하다

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

저렇게 경로에 id값을 추가하여 고유한 페이지를 생성한다.

function DetailPage(props) {
  let { id } = useParams();
}

그리고 useParams를 통해 해당 parameter를 사용 가능하다!

URL Parameter VS 쿼리스트링

주소 경로 내부에 특정 데이터를 넣어 전달하는 두 가지 방식이다.

url 파라미터는 ID 이름 특정 데이터를 조회할때 사용하는거라 일반적인 변수, 상수 값들을 전달하기 용이하고
쿼리스트링은 키워드 검색, 페이지네이션, 정렬방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용하며
key, value 형태의 데이터이므로 json이나 객체 형태의 데이터를 전달하기에 용이하다!