React-Router란?

9.24(화)

1. 코드스플리팅 - lazyLoading

👉 코드스플리팅은 router에서 import되는 부분을 전체 import가 아니라 변수로 따로 빼내어 해당 경로로 접근할 때만 로드되도록 하는 기법

const MainPage = lazy(() => import("../pages/MainPage"))

👉 레이지로딩은 Suspense컴포넌트를 사용하여 로딩상태를 사용자에게 보여주는 기법

const Loading = <LoadingComponent/>

element: <Suspense fallback={Loading}><MainPage/></Suspense>

👉 fallback을 통해서 데이터가 로드될때동안 Loading컴포넌트를 로드

---

2. Outlet, children

👉 MainRouter에서 todo의 예제로 설명을 하자면, url에 입력시에 todo를 입력했을때 list화면이 출력되어야하고 이후에 todo와 관련된 페이지를 만들기 위해선 todo/list, todo/input과 같이 url 설계가 이루어져야한다. 이때 사용되는것이 children인데

 path:"/todo",
        element: <Suspense fallback={Loading}><TodoIndex/></Suspense>,
        children: [
            {
                path:"list",
                element: <Suspense fallback={Loading}><TodoList/></Suspense>
            },
            {
                path:"",
                element: <Navigate to='list' replace={true}></Navigate> // 주소창에 todo를 입력하면 listPage로 redirect
            }
        ]

👉 해당코드에서는 todo의 하위페이지의 개념으로 Index페이지 아래에 children을 사용하여 path,element를 생성해주었고, list같은 경우에는 todo를 입력했을때 todo화면이 나오지않고 todoList화면이 출력되도록 Navigate를 만들었다.

또한 Indexpage에서는 Outlet태그를 사용하여 내부에 담기는 내용들이 Outlet아래에 작성되도록 설계한다.

import {Outlet} from "react-router-dom";
import BasicLayout from "../../layouts/BasicLayout.tsx";


function TodoIndex() { // Outlet은 mainRouter의 children
    return (
        <BasicLayout>
            <div>Todo Index Page</div>
        <div>
            <Outlet></Outlet>
        </div>
        </BasicLayout>
    );
}

export default TodoIndex;

---

3. layout

👉 layout은 개발 초기단계에 간략하게 틀을 잡아줘야 나중에 다 뒤집어 엎는 사태가 발발하지 않기 때문에 간략하게 미리 해놓는다.

👉 layout 컴포넌트를 별도로 생성해서 BasicLayout과 같은 tsx파일을 태그와 같이 사용하게 만든다.

👉 이때 layout파일에서는 하위 페이지들이 들어갈 내용인 children의 공간을 미리 생성해둬야한다.

---

4. useSearchParams / useParams

👉 해당 키워드들은 둘다 url에서 정보를 가져오는 방법들이다
📌 가장 중요한 키워드는 Router는 url 정보가 있고, url에서 정보를 가져와야하는것.

4-1. useSearchParams

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

function TodoListComponent() {

    const [query, setQuery] = useSearchParams(); // url의 page,size와 같은 정보를 추출할수있다.
    
    const changePage = (pageNum:number) => {
        query.set("page",""+pageNum); // 쿼리스트링의 page값에 pageNum을 넣어
        setQuery(query) //쿼리를 적용시켜준다.
    }

    const page: number = Number(query.get("page")) || 1
    const size: number = Number(query.get("size")) || 10

    console.log(size);
    console.log(page);

    return (
        <div>
            <div>Todo List Component</div>
        </div>
    );
}

export default TodoListComponent;

👉 여기서 query는 현재 url을 나타내고, 현재 query의 쿼리스트링 내부에 page부분을 pageNum으로 변경하여 setQuery(적용)하는것이다.

👉 http://localhost:5173/todo/list?page=11&size=2 이와 같은 url에서 page,size의 값을 추출할 수 있는 방법.

4-2. useParams

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

function TodoReadPage() {

    const {mno} = useParams()

    console.log(mno)

    return (
        <div>
            <div>Todo Read Page</div>
        </div>
    );
}

export default TodoReadPage;

👉 http://localhost:5173/todo/read/321 이와 같은 url에서 read의 값을 추출할 수 있는 방법.

📌 그렇다면 두가지의 차이점이 뭘까?

• 쿼리 문자열: useSearchParams로 처리 (예: ?page=11&size=2)
• 경로 파라미터: useParams로 처리 (예: /todo/read/:mno에서 :mno)

---

5. 페이지 이동

👉 페이지 버튼을 생성하여 페이지 이동이 되는것은 많은 방법들이 존재하지만, 동일한 버튼을 눌렀을때 또한 리로딩이되고 상태가 변경되어야 하는데, router에서는 url query가 변경되어야 작동이 되는 useEffect를 사용한다. 하지만 그렇게 되면 어떠한 값 자체가 동일한 페이지 버튼을 눌렀을때마다 변경이 되어야한다.

• refresh 토글
  👉 첫번째 방법은 refresh 토글이다. on/off와 같은 개념으로 페이지버튼을 눌렀을때 토글이 실행되어 변경되는 값을 억지로 만드는방법

• time
  👉 두번째 방법은 현재 시간을 url에 집어넣어 계속 변경되는 url값을 만드는것이다.

• useLocation
  👉 가장 깔끔한 방법으로 useLocation 내부의 key속성을 이용하는데, key속성은 url을 리로드 할때마다 생성되는 key값을 이용한다.

    const location = useLocation();

    useEffect(() => {
        setLoading(true)
        getTodoList(page,size).then(data => {
            setPageResponse(data)
            setLoading(false)
        })
    },[query, location.key])

    return (
        <div>
            {loading&& <LoadingComponent/>}
            <div>Todo List Component</div>
            <PageComponent pageResponse={pageResponse}></PageComponent>
        </div>
    );
}

export default TodoListComponent;

👉 해당 컴포넌트는 TodoListComponent로 useLocation을 이용하여 url을 호출할때마다 location을 생성해주고, useEffect에 객체에는 query와 location.key를 넣어준다.

---

6. useNavigate / createSearchParams

👉 useNavigate는 Link와 비슷한데, Link는 정적으로 작성해놓은 url으로 이동하는 태그이고, useNavigate는 동적으로 변경되어 작성된 url로 이동하는 태그이다.

 const navigate = useNavigate();

    const queryStr = createSearchParams({page:page, size:size});
    // page와 size쿼리 파라미터를 포함하는 쿼리스트링 만들기

    console.log("queryStr====================="+queryStr);

    const moveToRead = (mno:number) => {
        navigate({pathname:`/todo/read/${mno}`, search:`?${queryStr}`})
    }
    // mno클릭시 동적으로 이동하는 경로를 생성

👉 현재 상황을 설명하자면, list에 출력되어있는 todoList를 선택했을때 read페이지로 이동하는데, 이동은 되지만 이동된 이후에 url에 기존의 page와 size가 기록이 안되는 상황이다.

👉 이러한 불상사를 막기위해 url에 이전의 내용을 이어붙혀야하는데, 그때 사용되는 객체가 createSearchParams이다. 현재 url 쿼리스트링의 page와 size를 포함하는 url을 생성하여 queryStr에 넣어두고, 이동하려는 moveTodRead 내부에 navigate를 이용하여 경로를 설정하고, search에서의 물음표는 mno가 없을수도 있기에 붙인것이고 작성해뒀던 url인 queyStr을 넣어준다.