📐

useSearchParams와 useNavigate

•

ListPage에서 useSearchParams 사용

import React from 'react';
import { useSearchParams } from 'react-router-dom';

function ListPage(props) {

    const [queryParams] = useSearchParams()

    const page = queryParams.get('page') ? parseInt(queryParams.get('page')) : 1
    const size = queryParams.get('size') ? parseInt(queryParams.get('size')) : 10

    return (
        <div className="p-4 w-full bg-orange-200 ">
            <div className="text-3xl font-extrabold">
                Todo List Page Component --- {page} --- {size}
            </div>
        </div>
    );
}

export default ListPage;
JavaScript
복사

•

IndexPage에서 List와 Add의 이벤트 적용

import React, { useCallback } from "react";
import BasicLayout from "../BasicLayout";
import { Outlet, useNavigate } from "react-router-dom";

function IndexPage(props) {

    const navigate = useNavigate()
		
		// 추가
    const handleClickList = useCallback(() => {
        navigate({pathname:'list'})
    }, [])

    const handleClickAdd = useCallback(() => {
        navigate({pathname: 'add'})
    }, [])
    //

    return (
        <BasicLayout>
            <div className="w-full flex m-2 p-2 ">
            // 수정
                <div
                    className="text-xl m-1 p-2 w-20 font-extrabold text-center underline"
                    onClick={handleClickList}>LIST</div>
                <div
                    className="text-xl m-1 p-2 w-20 font-extrabold text-center underline"
                    onClick={handleClickAdd}>ADD</div>
            </div>
            //
            <div className="flex flex-wrap w-full">
                <Outlet />              {/* 서브 메뉴 잡을 때 사용*/}
            </div>
        </BasicLayout>
    );
}

export default IndexPage;
JavaScript
복사

•

todo의 AddPage.js 추가

import React from 'react';

function AddPage(props) {
    return (
        <div className={'text-3xl font-extrabold'}>
            Add Page
        </div>
    );
}

export default AddPage;
JavaScript
복사