[6주차] 리액트 숙련: React Router Dom - 소개, hooks, children

React Router Dom

여러 페이지를 가진 웹을 만들 수 있는 패키지이다.

: 해당 컴포넌트만 바꿔주어 랜더링하는 로직

 

//About.jsx

import React from 'react'

function About() {
  return (
    <div>About</div>
  )
}

export default About

 

 

 

//Contact.jsx
import React from 'react'

function Contact() {
  return (
    <div>Contact</div>
  )
}

export default Contact

 

 

 

//Home.jsx
import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

 

 

 

//Works.jsx
import React from 'react'

function Works() {
  return (
    <div>Works</div>
  )
}

export default Works

 

 

 

//shared > Router.js
import React from 'react';
import {BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return(

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="about" element={<About />}/>
        <Route path="contact" element={<Contact />}/>
        <Route path="works" element={<Works />}/>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

 

 

 

// App.jsx
import './App.css';
import Router from './shared/Router';

function App() {
  return (
    <Router />
  );
}

export default App;

 

 

 

 

React Router Dom의 hook

- useNavigate

다른 페이지로 보내고자 할 때 사용한다.

브라우저에 직접 path를 입력해서 페이지를 이동하는 것이 아니라, 예를 들어 버튼을 누르면 페이지로 이동하는 등

 

사용방법

1. const navigate = useNavigate(); 선언

  const navigate = useNavigate();

 

2. onClick 이벤트에 navigate(이동할 url)

    <button onClick={()=> {navigate("/works")} }>Works로이동</button>

 

전체코드

import React from 'react'
import { useNavigate } from 'react-router-dom'

function Home() {


  const navigate = useNavigate();

  return (
    <div>Home<br />
    <button onClick={()=> {navigate("/works")} }>Works로이동</button>
    </div>
  )
}

export default Home

 

 

-useLocation

우리가 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다. 이 정보들을 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 여러가지 용도로 활용할 수 있다.

 

import React from 'react'
import { useNavigate, useLocation } from 'react-router-dom'

function Home() {


  const navigate = useNavigate();
  const location = useLocation();

  console.log('location :', location) //Object{hash:"", key: "default", pathname: "/", search: "", state: null}

  return (
    <div>Home<br />
    <button onClick={()=> {navigate("/works")} }>Works로이동</button>
    </div>
  )
}

export default Home

 

 

 

 

-Link

훅은 아니지만, 중요한 API

 

Link 는 html 태그중에 a 태그의 기능을 대체하는 API.

만약 JSX에서 a 태그를 사용해야 한다면, 반드시 Link 를 사용해서 구현해야 한다.

 

WHY?

왜냐하면 a 태그를 사용하면  페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문이다.

브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링되야 하고, 또한 우리가 리덕스나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화 된다. 이것은 곧 성능에 악역향을 줄 수 있고, 불필요한 움직임이다.

 

import React from 'react'
import { useNavigate, useLocation, Link } from 'react-router-dom'

function Home() {

  return (
    <div>Home<br />
    <button>Works로이동</button><br />
    <Link to='/contact'>contact 페이지로 이동</Link>
    </div>
  )
}

export default Home

 

 

 

 

-useParams