[React]Router v6 사용법, 관련 Hooks 정리

Router 6v에 대한 공부 기록이다.

SPA(Single Page Application)

• 의미 : 한 개의 페이지로 이루어진 애플리케이션
• SPA는 서버에서 사용자에게 제공하는 페이지는 한 종류지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다. 
• 라우터는 다른 주소에 다른 화면을 보여주는 역할을 한다.

BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter} from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

• react-router-dom에 내장된 BrowswerRouter 컴포넌트로 App 컴포넌트를 감싼다.
• BrowserRouter 컴포넌트는 브라우저의 API를 사용하여 새로고침 하지 않고도 주소의 경로 관련 정보를 컴포넌트가 사용할 수 있도록 해준다.

보일 화면 컴포넌트

import React from "react";
const Home = () => {
  return (
    <div>
      <h1>홈화면</h1>
    </div>
  );
};
export default Home;

import React from "react";
const About = (props) => {
  console.log(props);
    return (
    <div>
      <h1>설명 화면</h1>
    </div>
  );
};
export default About;

• 초기 홈 화면과 주소를 /about으로 옮겼을 때 보일 about 페이지이다.

Routes/Route

import {Route,Routes} from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  return (    
      <div>
        <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/about" element={<About/>} />
        </Routes>
      </div>
  );
}

export default App;

• 주소 경로에 따라 원하는 컴포넌트를 렌더링 하기 위해서는 Route 컴포넌트를 사용해야 한다.

사용법 : <Route path="주소" element={<컴포넌트/>}/>

• Route 컴포넌트는 Routes 컴포넌트로 감싸줘야 한다.

 Link

• 다른 주소로 넘어갈 때 사용하는 a 태그는 페이지를 새로 불러오기 때문에 데이터를 보존할 수 없다.
• Link 컴포넌트는 새로 불러오는 것을 막고, 주소의 경로만 바꿔준다.

사용법 : <Link to = " 경로 "> 페이지 이름 </Link>

import {Route,Link,Routes} from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  return (    
      <div>
        <ul>
          <li>
            <Link to='/'>홈</Link>
          </li>
          <li>
            <Link to='/about'>소개</Link>
          </li>
        </ul>
        <hr/>
        <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/about" element={<About/>} />
        </Routes>
      </div>
  );
}

export default App;

• 위와 같이 홈과 소개로 갈 수 있는 Link가 나오는 것을 확인할 수 있다.
• Link를 클릭하면 해당 컴포넌트를 렌더링 해준다.

 URL 파라미터와 쿼리

• 페이지 주소를 정의할 때 가끔 유동적인 값을 전달해야 할 때도 있다.
  • 파라미터 예시 : /profile/choi
  • 쿼리 예시 : /about?detail=true
• 주로 파라미터는 특정 아이디 혹은 이름을 사용하여 조회할 때 사용하고, 쿼리는 어떤 키워드를 검색하거나 페이지에 필요한 옵션을 전달할 때 사용한다.

Query&Params
Query와 Params를 구분하는 요인은 여러 가지가 있지만,
그 값이 optional 하지 않다면 보통의 경우는 params로 사용한다.
특히 DB에서 어떤 row를 특정할 수 있는 경우를 보통 params로 받는다.

URL 파라미터

• Route의 path 규칙에 '/profile/:username' 이라고 넣어주면 이동하는 컴포넌트의 인자로 전달되는 객체에서 username 값을 가져올 수 있다.
• useParams( ) 훅을 사용하면 url을 통해 쉽게 username을 가져올 수 있다.

import {Route,Link,Routes} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Profile from './Profile';
function App() {
  return (    
      <div>
        <ul>
          <li>
            <Link to='/'>홈</Link>
          </li>
          <li>
            <Link to='/about'>소개</Link>
          </li>
          <li>
            <Link to='/profile/choi'>choi의 프로필</Link>
          </li>
        </ul>
        <hr/>
        <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/about" element={<About/>} />
          <Route path="/profile/:username" element={<Profile/>}/>
        </Routes>
      </div>    
  );
}
export default App;

import {useParams} from 'react-router-dom'
const data={
    choi : {
        name : 'choi',
        description : 'studying react',
    }
}

const Profile=()=>{
    console.log(useParams());
    const {username}=useParams();
    const profile=data[username];
    if(!profile)return <div>존재하지 않는 사용자입니다.</div>
    return(
        <div>
            <h3>{username}</h3>
            <p>{profile.description}</p>
        </div>
    )
}

export default Profile;

• 위와 같이 Profile 컴포넌트에서 useParams의 반환 값을 보면

• username이 담긴 객체를 볼 수 있다.
• 이렇게 API를 통해 받아온 data 객체에서 username으로 사용자의 정보를 조회할 수 있다.

쿼리 파라미터

• useLocation( ) 훅을 사용하면 location 객체를 얻을 수 있다.
• location 객체에는 현재 사용자가 보고 있는 페이지의 정보를 담고 있다.

import React from "react";
import { useLocation } from "react-router-dom";
const About = () => {
  const location=useLocation(); 
  console.log(location);
  return (
    <div>
      <h1>설명 화면</h1>
    </div>
  );
};
export default About;

• location 객체를 콘솔에 띄워보면,

• 위와 같은 location 객체를 얻을 수 있다.
• 이 객체 내부 값들을 살펴보면,
  • hash : 주소의 #뒤의 값
  • key : location 객체의 고유값, 페이지가 변경될 때마다 고유의 값이 생김
  • pathname : 현재 주소의 경로
  • search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값
  • state : 페이지로 이동할 때 임의로 넣을 수 있는 값
• 주소 값을 http://localhost:3000/about?detail=true로 바꿔봤다.

• 객체 값이 위와 같이 바뀐 것을 확인할 수 있다.

useNavigate( )

• useNavigate( ) 훅은 Link 컴포넌트를 사용하지 않고 주소를 조작할 수 있는 기능을 제공한다.
• useNavigate( )가 반환하는 함수는 두 가지 인자를 줄 수 있다.

navigate(' 주소 ', {replace : boolean} )

• 첫 번째 인자로 전달하는 주소는 이동할 주소를 말한다.
• 두 번째 인자로 전달하는 replace는 true일 경우, 해당 주소로 이동한 후 다시 전 페이지로 넘어갈 수 없게 한다.
• navigate(-1)처럼 -1을 인자로 전달하면 전 페이지로 돌아가게 해 준다.

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

const NavigateSample=()=>{
    const navigate=useNavigate();
    const goBack=()=>{
        const confirm=window.confirm('정말 떠나시겠어요')
        if(confirm)navigate(-1);
    };
    const goHome=()=>{
        navigate('/');
    }
    return(
        <div>
            <button onClick={goBack}>뒤로</button>
            <button onClick={goHome}>홈으로</button>
        </div>
    )
}

export default NavigateSample;

 

• 뒤로 버튼을 누르면 전 페이지로 이동시켜준다.
• 홈으로 버튼을 누르면 초기화면인 홈 페이지로 이동시켜준다.