@yoonhaemin-lib/use-param-state v2.0.2

useParamState

state관리를 useState가 아닌 param으로 관리합니다. useState와 인터페이스가 같아 기존에 있는 state를 url로 의존성을 옮기기 쉽습니다.

예시 코드

import React from 'react';
import useParamState from './useParamState';

const ExampleComponent: React.FC = () => {
  // 'page'와 'filter'라는 두 개의 쿼리 파라미터를 관리하는 상태로 설정
  const [searchParams, setSearchParams] = useParamState<{ page: string | undefined; filter: string | undefined }>({
    page: '1',
    filter: undefined,
  });

  const handleNextPage = () => {
    setSearchParams((prevState) => ({
      ...prevState,
      page: (Number(prevState.page) + 1).toString(),
    }));
  };

  const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchParams((prevState) => ({
      ...prevState,
      filter: event.target.value,
    }));
  };

  return (
    <div>
      <h2>현재 페이지: {searchParams.page}</h2>
      <h2>현재 필터: {searchParams.filter ?? '없음'}</h2>

      <button onClick={handleNextPage}>다음 페이지로 이동</button>

      <input type="text" placeholder="필터 입력" value={searchParams.filter ?? ''} onChange={handleFilterChange} />
    </div>
  );
};

export default ExampleComponent;

API Reference

useParamState 매개변수

useParamState 반환값