React Router

1. React Router 란

 1) React 에서 SPA(Single Page Application) 방식으로 Routing 할 수 있게 해주는 라이브러리

 2) MPA (Milti Page Apllicating) 방식은 여러페이지로 구성이 되어 있어서, 다른페이지로 넘어갈때마다

     완성된 HTML 파일을 받아오는 방식.

     이로 인해 페이지 전환이 있을때 마다 flicker 현상(화면깜빡임) 이 일어나서 사용자 경험을 좋지 않게 한다.

 3) SPA 방식의 라우팅은 서버로 부터 비어있는 HTML 을 받아오고 Javascript 파일을 받아와서 클라이언트

     에서 조합해서 화면을 렌터링 한다. 그리고 다른페이지로 넘어갈때 데이터를 받아와서 필요한 부분만 리렌터링

     하는 방식

 

2. React Router 사용법

  1) React Router 라이브러리 설치  

     - 설치명령어      

npm i react-router-dom

 

 

 

 2) React Router 주요 컴포넌트

 

<BrouserRouter>

리액트 라우터를 사용하고 싶은 곳을 감싸주는 컴포넌트

BrouserRouter 컴포넌트의 자식 컴포넌트로 속해 있어야 React Router 기능을 사용할 수 있다

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

<Link> 

브라우저 상에서는 <a> 태그로 표시가 되지만  이요소를 클릭 했을 때 새로고침은 발생되지 않음

(원래 <a>요소는 브라우저에서 새로고침이 발생한다.)

그리고 to 속성의 주소로 이동이 된다.

<Link to='/main'> 메인 <Link>

 

<Routes>

<Route>

 

path 에 작성된 주소에 접근하면 element 속성에 작성된 컴포넌트를 화면에 보여주게 된다.

<Routes>
    <Route path="/" element={<Main />}></Route>
    <Route path="/detail" element={<Deatil />}></Route>
    <Route path="/search" element={<Search />}></Route>
</Routes>

 

 

3. React Router 주요 함수

useNavigate()

const navigate = useNavigate()
navigate(/main) // main으로 이동
navigate(1) // 앞으로 가기
navigate(-1) // 뒤로가기
navigate(2) // 2페이지 앞으로 가기
navigate(-2) // 2페이지 뒤로가기

 

useLocation()

useLocation()을 변수에 담아서 출력 해보면 객체를 반환한다.

 

  pathname 속성 :  페이지의 주소 출력

  search속성 : 물음표(?) 뒤의 값이 출력이 된다.

const location = useLocation()

console.log(location)

// {
//    "pathname": "/detail/13",
//    "search": "",
//    "hash": "",
//    "state": null,
//    "key": "vigm5keq"
// }

// http://localhost:1234/search?animal=cat

console.log(useLocation().pathname)  // /search
console.log(useLocation().search)  // animal=cat

 

 

 

useParams()

가지고 오고 싶은 주소의 뒤에 세미콜론(:) 변수명을 적어주면 Detail 컴포넌트에서 이 값을 가져 올 수 있다.

 

상위 컴포넌트에서 Route 의 path 속성 값에 쓰고 싶은 변수명을 적는다

<Routes>
    <Route path="/" element={<Main />}></Route>
    <Route path="/detail/:name" element={<Deatil />}></Route>  // path 뒤에 :변수명 작성    
    <Route path="/search" element={<Search />}></Route>
</Routes>

 

 

하위 컴포넌트에서 아래와 같이 가져올수 있다.

function Detail(){
const params =useParams()

console.log( params.name )   // deatil/ 주소뒤의 값을 출력함

}

 

 

 

useSearchParams()

 

물음표 ? 뒤의 쿼리 스트링의 주소값 중에서 특정 값을 지정해서 아래와 같이 받아 올 수 있다. 

// http://localhost:1234/search?animal=cat



const [searchParams, setSearchParams] = useSearchParams()

const params = searchParams.get(’animal’) // —> cat 을 가져옴