react router

설치

npm install react-router-dom@6

App.js

import './App.css';
import {BrowserRouter, Route, Routes} from 'react-router-dom';

import RouteTest from './component/RouteTest';

import Home from './pages/Home';
import Diary from './pages/Diary';
import New from './pages/New';
import Edit from './pages/Edit';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>APP.js</h2>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/new' element={<New />} />
          <Route path='/edit' element={<Edit />} />
          <Route path='/diary' element={<Diary />} />
        </Routes>
        {/* 페이지를 이동하는 링크 컴포넌트 */}
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}


export default App;

Route 컴포넌트는 실질적으로 url경로와 컴포넌트를 랩핑시켜주는 컴포넌트이다.

<Route path='/' element={<Home />} />

경로가 '/'일떄 요소는 home 컴포넌트이다.

./component/RouteTest

import {Link} from "react-router-dom";
//리액트라우트돔에서 제공하는 페이지를 이동시키는 기능 


//라우트 컴포넌트는 리액트 라우트에서 제공하는 csr 방식으로
//페이지를 이동시키느 컴포넌트 역할을 한다. 
const RouteTest = () => {
   return <>
   <Link to = {'/'}>HOME</Link>
   {/* to라는 프롬에다가 경로를 전달해야 한다. 홈으로 이동하는 링크 */}
   <br />
   <Link to= {'/diary'}>DIARY</Link>
   <br />
   <Link to= {'/new'}>NEW</Link>
   <br />
   <Link to= {'/edit'}>EDIT</Link>
   </>
}

export default RouteTest;

---

REACT ROUTER V6

REACT에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

Path Variable - useParams

경로의 변수를 사용하는 기법

Query String - useSearchParams

url과 경로를 전달할 수 있는 기법

Query

웹 페이지에 데이터를 전달하는 가장 간단한 방법

ex)
/edit?id=10&mode=dark
name과 value를 엮어서 데이터를 전송할 수 있는 기법을 Query String이라고 한다 . 다른 변수(mode=dark)를 전달하고 싶으면 &을 쓰면 된다 .

Page Moving - useNavigate

페이지를 이동시키는데 유저가 액션을 취지 않았는데도 강제로 페이지를 이동시키는 방법

Path Variable - useParams

EX) Diay 페이지
경로 : /diary
특징 : 어떤 일기를 보여줘야 할지 전달 받아야 함
예: /diary/1 (경로 뒤에 '1'이라는 아이디를 넣어줌/ url에 변수를 넣어서 전달)

App 컴포넌트

<Route path='/diary/:id' element={<Diary />} />
         {/* Path Variable - useParams을 사용해주기 위해서는 ":"뒤에 id를 
          붙어주어 id값을 전달하겠다고 표현 */}

Diary 컴포넌트

import { useParams } from "react-router-dom";
//리액트가 제공하는 리액트 훅은 아니지만 
//별도의 라이브러리가 자신의 라이브러리를 더 편하게 이용할 수 있게 
//만들어주는 사용자 정의 훅들을 커스텀 훅이라고 부른다 .

const Diary =() => {

    const {id} = useParams();
    //useParams를 이용하면 전달받아서 들어오게 되는 path Variable을 
    //모아서 객체로 갖다주게 된다. 
    // 이런 path Variable를 id로 정해둠

    return (
        <div>
            <h1>Diary</h1>
            <p>이곳은 일기 상세 페이지 입니다. </p>
        </div>
    )
}

export default Diary;

Query String - useSearchParams

/edit?id=10&mode=dark

name과 value를 엮어서 데이터를 전송할 수 있는 기법을 Query String이라고 한다 . 다른 변수(mode=dark)를 전달하고 싶으면 &을 쓰면 된다 .

Edit컴포넌트

import { useSearchParams } from "react-router-dom";

const Edit =() => {
    //Query String - useSearchParams을 이용하는 방법 
    const [searchParams, setSearchParams] = useSearchParams();

    const id = searchParams.get("id");
    console.log("id : ", id);

    const mode = searchParams.get("mode");
    console.log("mode : ", mode);

    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다. </p>
        </div>
    )
}

export default Edit;

결과값

    const [searchParams, setSearchParams] = useSearchParams();

여기서 setSearchParam는 searchParams를 변경시키는 역할을 한다.
이 말은 Query String인 '/edit?id=10&mode=dark'을 바꿀 수 있다는 소리이다.

Edit컴포넌트

import { useSearchParams } from "react-router-dom";

const Edit =() => {
    //Query String - useSearchParams을 이용하는 방법 
    const [searchParams, setSearchParams] = useSearchParams();

    const id = searchParams.get("id");
    console.log("id : ", id);

    const mode = searchParams.get("mode");
    console.log("mode : ", mode);

    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다. </p>
            <button onclick={() => setSearchParams({who : "winterlood"})}>QS 바꾸기</button>
        </div>
    )
}

export default Edit;

결과값

바뀐값

Page Moving - useNavigate

Edit 컴포넌트

import { useNavigate, useSearchParams } from "react-router-dom";

const Edit =() => {
    //navigate사용 방법
    const navigate = useNavigate();
    const [searchParams, setSearchParams] = useSearchParams();

    const id = searchParams.get("id");
    console.log("id : ", id);

    const mode = searchParams.get("mode");
    console.log("mode : ", mode);

    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다. </p>
            <button onclick={() => setSearchParams({who : "winterlood"})}>QS 바꾸기</button>
            <button onclick={()=>navigate("/home")}>HOME으로 가기</button> 
        </div>
    )
}

export default Edit;

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

const Edit =() => {
    //navigate사용 방법
    const navigate = useNavigate();


    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다. </p>
            <button onclick={()=>navigate("/home")}>HOME으로 가기</button> 
            {/* 뒤로가기*/}
            <button onclick={()=>navigate(-1)}>뒤로가기</button>
        </div>
    )
}

export default Edit;