상태를 URL과 동기화하는 사용자 정의 React 후크

React 애플리케이션을 구축할 때 URL에 상태를 반영하는 것이 유용한 경우가 많습니다. 이를 통해 상태를 공유할 수 있을 뿐만 아니라 사용자가 컨텍스트를 잃지 않고 페이지를 북마크하거나 새로 고칠 수 있습니다. 이 게시물에서는 TypeScript에서 useParamState라는 사용자 정의 React 후크를 만듭니다. 이 후크는 useState처럼 작동하지만 상태를 URL의 검색 매개변수와 동기화하기도 합니다. 중요한 것은 복잡한 객체 값을 지원한다는 것입니다.

왜 ParamState를 사용하나요?

React Router의 useSearchParams 후크는 URL 검색 매개변수를 관리하는 데 탁월하지만 이를 구성요소 상태와 동기화하는 것은 번거로울 수 있습니다. useParamState 후크는 다음을 통해 이 문제를 해결합니다.

• useState와 유사한 간단한 API를 제공합니다.
• 상태를 URL 검색 매개변수와 자동으로 동기화합니다.
• 객체를 포함한 복합 유형을 지원합니다.

전제 조건

• React, TypeScript, React Router에 대한 기본 이해
• useState 및 useEffect에 대한 지식

useParamState 구현

1단계: 프로젝트 설정

(Vite로 이동하지 않는 경우 반응 프로젝트를 설정하는 방법을 이미 알고 있다고 가정합니다.)

react-router-dom이 설치되어 있는지 확인하세요.

npm install react-router-dom

2단계: useParamState 후크

useParamState 후크를 구현하는 방법은 다음과 같습니다.

import { useCallback, useState } from 'react';
import { useSearchParams } from 'react-router-dom';

/**
 * A custom hook that syncs state with a URL search parameter.
 * Supports string, number, boolean, and object values.
 * @param key The search parameter key to sync with.
 * @param defaultValue The default value for the state.
 * @returns A stateful value, and a function to update it.
 */
function useParamState<T extends string | number | boolean | object>(
  key: string,
  defaultValue: T
): [T, (newValue: Partial<T> | T) => void] {
  const [searchParams, setSearchParams] = useSearchParams();
  const paramValue = searchParams.get(key);

  const [state, setState] = useState<T>(() => {
    if (paramValue === null) {
      return defaultValue;
    }
    try {
      return JSON.parse(paramValue) as T;
    } catch {
      return paramValue as T;
    }
  });

  const setParamState = useCallback(
    (newValue: Partial<T> | T) => {
      const updatedValue = typeof newValue === 'object' && !Array.isArray(newValue)
        ? { ...state, ...newValue }
        : newValue;

      setState(updatedValue as T);
      const newSearchParams = new URLSearchParams(searchParams);
      newSearchParams.set(key, JSON.stringify(updatedValue));
      setSearchParams(newSearchParams);
    },
    [key, searchParams, setSearchParams, state]
  );

  return [state, setParamState];
}

export default useParamState;

작동 방식

초기화:

후크는 지정된 검색 매개변수가 URL에 존재하는지 확인하는 것부터 시작됩니다. 그렇다면 후크는 이를 구문 분석하여 초기 상태로 사용합니다. 그렇지 않으면 제공된 defaultValue로 대체됩니다.

상태 업데이트:

setParamState 함수는 내부 상태와 URL의 검색 매개변수를 모두 업데이트합니다. JSON.stringify를 사용하여 상태를 직렬화하므로 복잡한 객체를 URL에 저장할 수 있습니다.

유형 지원:

훅은 TypeScript의 제네릭 및 JSON 구문 분석을 활용하여 다양한 유형(문자열, 숫자, 부울 및 개체)을 지원합니다.

3단계: useParamState 사용

React 구성 요소에서 useParamState를 사용하는 방법을 살펴보겠습니다.

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

interface FilterState {
  status: string;
  sortBy: string;
}

const MyComponent: React.FC = () => {
  const [filter, setFilter] = useParamState<FilterState>('filter', {
    status: 'all',
    sortBy: 'date',
  });

  return (
    <div>
      <h2>Current Filter: {filter.status}, Sort by: {filter.sortBy}</h2>
      <button onClick={() => setFilter({ status: 'active', sortBy: filter.sortBy })}>
        Active
      </button>
      <button onClick={() => setFilter({ status: 'completed', sortBy: filter.sortBy })}>
        Completed
      </button>
      <button onClick={() => setFilter({ ...filter, sortBy: 'priority' })}>
        Sort by Priority
      </button>
    </div>
  );
};

export default MyComponent;

4단계: 후크 테스트

useParamState 후크가 예상대로 작동하는지 확인하려면 @testing-library/react를 사용하여 단위 테스트를 작성할 수 있습니다.

import { renderHook, act } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import useParamState from './useParamState';

interface FilterState {
  status: string;
  sortBy: string;
}

test('should sync object state with search params', () => {
  const wrapper = ({ children }: { children: React.ReactNode }) => (
    <MemoryRouter initialEntries={['/']}>{children}</MemoryRouter>
  );

  const { result } = renderHook(() => useParamState<FilterState>('filter', { status: 'all', sortBy: 'date' }), { wrapper });

  // Initial state
  expect(result.current[0]).toEqual({ status: 'all', sortBy: 'date' });

  // Update state and URL
  act(() => {
    result.current[1]({ status: 'active', sortBy: 'priority' });
  });

  // Updated state
  expect(result.current[0]).toEqual({ status: 'active', sortBy: 'priority' });
});

결론

useParamState 후크는 상태를 URL 검색 매개변수와 동기화하는 프로세스를 단순화하여 React 애플리케이션을 더욱 강력하고 사용자 친화적으로 만듭니다. 객체와 같은 복잡한 유형을 지원하는 이 후크는 페이지를 다시 로드할 때 지속되거나 URL을 통해 공유되어야 하는 상태를 관리하기 위한 강력한 도구입니다.

이 후크를 더욱 확장하여 훨씬 더 복잡한 데이터 구조를 처리할 수 있지만 대부분의 사용 사례에서는 이 구현으로 요구사항을 충족할 수 있습니다.

( 기사에 댓글을 달아주시면 더 좋은 글을 만들고 제가 저지른 실수를 개선할 수 있도록 미리 감사드립니다. )

다른 플랫폼에서도 편하게 팔로우해주세요

• 링크드인

• 깃허브

• 인스타그램

위 내용은 상태를 URL과 동기화하는 사용자 정의 React 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!