본문 바로가기
강의 실습/한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

페이지 라우팅 2 - React Router 응용

by Jint 2024. 1. 31.

CSR

 

1. React Router Dom 의 유용한 기능
React Router V6 : React 에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

- Path Variable
useParams

- Query String
useSearchParams

- Page Moving
useNavigate

Diary 페이지
경로 : /diary
특징 : 어떤 일기를 보여줘야 할 지 전달 받아야 함
예 : /diary/1 -> 1번 일기

1) Path Variable : URL 에 변수를 담아서 전달하는 방법

- App.js

...
<Routes>
  <Route path='/' element={<Home />} />
  <Route path='/new' element={<New />} />
  <Route path='/edit' element={<Edit />} />
  <Route path='/diary/:id' element={<Diary />} />
  <Route path='/diary' element={<Diary />} />
</Routes>
...


이렇게 콜론을 사용하여 id 라는 이름으로 뒤에 있는 값을 전달하겠다고 설정한다. 이후 http://localhost:3000/diary/1 경로로 접속하면 Diary 페이지에 접속되는 것을 확인할 수 있다.
http://localhost:3000/diary 경로로 다시 접속하면 아무것도 안 나오게 된다. 이런 경우 별도로 '/diary' 경로를 추가하여 처리해야 한다. 하지만 일기의 id 가 존재하지 않는 경우가 없으므로 별도 추가 처리는 하지 않는다.

전달한 '1' 이라는 Path Variable 을 사용해본다.

- Diary.js

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

const Diary = () => {

    // 사용자 정의 Hooks (커스텀 Hooks)
    const { id } = useParams(); // 전달받아 들어오는 Path Variable 들을 모아서 객체로 반환
    console.log(id);

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

export default Diary;


사용자 정의 Hooks 인 useParams 을 이용하여 http://localhost:3000/diary/1 경로로 전달받는 '1' 값을 받아낸다.

2) Query String : 경로에 name 과 value 를 엮어서 데이터를 전송할 수 있는 기법
Query : 웹 페이지에 데이터를 전달하는 가장 간단한 방법

예시)
/edit?id=10&mode=dark
=> Query String

http://localhost:3000/edit?id=10&mode=dark 경로로 이동하면 Edit 페이지에 잘 이동되는데, 이렇게 Query String 으로 전달하면 별도의 처리를 하지 않아도 페이지가 잘 나온다. ? (물음표) 뒤의 경로들은 페이지 라우팅하는 경로에 영향을 주지 않는다.
Query String 을 Edit 컴포넌트에서 꺼내서 사용해본다.

- Edit.js

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

const Edit = () => {

    // 1번째 인덱스 : Query String 꺼내 쓰는 용도
    // 2번째 인덱스 : searchParams 를 변경시킨다. 실시간으로 Query String 을 바꿀 수 있다.
    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: 'test' })}>
                QS 바꾸기
            </button>
        </div>
    );
};

export default Edit;


useSearchParams 를 이용하여 http://localhost:3000/edit?id=10&mode=dark 경로로 전달한 값을 받아내고, 또 실시간으로 변경해 보았다.

3) Page Moving : 페이지 이동
사용 예시) 로그인 안된 사용자를 강제로 로그인 페이지에 보낼 때

- Edit.js

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

const Edit = () => {

    // 1번째 인덱스 : Query String 꺼내 쓰는 용도
    // 2번째 인덱스 : searchParams 를 변경시킨다. 실시간으로 Query String 을 바꿀 수 있다.
    const [searchParams, setSearchParams] = useSearchParams();

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

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

    // 페이지 이동 하는 함수를 반환. 매개변수로 경로 설정.
    const navigate = useNavigate();

    return (
        <div>
            <h1>Edit</h1>
            <p>이곳은 일기 수정 페이지 입니다.</p>
            <button onClick={() => setSearchParams({ who: 'test' })}>
                QS 바꾸기
            </button>
            <button
                onClick={() => {
                    navigate('/');
                }}
            >
                HOME 으로 가기
            </button>
            <button
                onClick={() => {
                    navigate(-1); // 뒤로 1번 가면 -1
                }}
            >
                뒤로 가기
            </button>
        </div>
    );
};

export default Edit;


useNavigate 기능은 링크 태그를 클릭하지 않았을 때도 의도적으로 페이지를 이동시킬 수 있다.

 

Edit 페이지 Query String, Page Moving 적용 결과



참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#

 

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런

개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로 끝장낼 수 있어요.

www.inflearn.com

댓글