window.location을 다루기 위해 아톰을 생성하는 몇 가지 함수가 있습니다.

설치

이 기능을 사용하려면 jotai-location을 설치해야 합니다.

npm install jotai-location

atomWithLocation

atomWithLocation(options): PrimitiveAtom

atomWithLocation은 window.location에 연결된 새로운 아톰을 생성합니다.

일반적으로 애플리케이션당 한 번만 atomWithLocation을 인스턴스화해야 합니다. 한 인스턴스에서 변경된 내용이 다른 인스턴스에 반영되지 않을 수 있기 때문입니다. 이 아톰은 window.location 객체와 동기화되도록 설계되었으므로, 여러 인스턴스를 사용하면 예측할 수 없는 동작이 발생할 수 있습니다.

매개변수

options (선택 사항): 아톰의 동작을 커스터마이즈하기 위한 옵션 객체

옵션

preloaded (선택 사항): 초기화 시 위치 값을 가져오지 않기 위해 미리 로드된 위치 값.

replace (선택 사항): pushState 대신 replaceState를 사용할지 여부를 나타내는 불리언 값.

getLocation (선택 사항): 위치 값을 가져오는 커스텀 함수.

applyLocation (선택 사항): 위치 값을 설정하는 커스텀 함수.

subscribe (선택 사항): 위치 변경을 구독하는 커스텀 함수.

예제

import { useAtom } from 'jotai'
import { atomWithLocation } from 'jotai-location'

const locationAtom = atomWithLocation()

const App = () => {
  const [loc, setLoc] = useAtom(locationAtom)
  return (
    <ul>
      <li>
        <button
          style={{
            fontWeight: loc.pathname === '/' ? 'bold' : 'normal',
          }}
          onClick={() => setLoc((prev) => ({ ...prev, pathname: '/' }))}
        >
          Home
        </button>
      </li>
      <li>
        <button
          style={{
            fontWeight:
              loc.pathname === '/foo' && !loc.searchParams?.get('bar')
                ? 'bold'
                : 'normal',
          }}
          onClick={() =>
            setLoc((prev) => ({
              ...prev,
              pathname: '/foo',
              searchParams: new URLSearchParams(),
            }))
          }
        >
          Foo
        </button>
      </li>
      <li>
        <button
          style={{
            fontWeight:
              loc.pathname === '/foo' && loc.searchParams?.get('bar') === '1'
                ? 'bold'
                : 'normal',
          }}
          onClick={() =>
            setLoc((prev) => ({
              ...prev,
              pathname: '/foo',
              searchParams: new URLSearchParams([['bar', '1']]),
            }))
          }
        >
          Foo?bar=1
        </button>
      </li>
    </ul>
  )
}

Stackblitz

atomWithHash

atomWithHash(key, initialValue, options): PrimitiveAtom

이 함수는 URL 해시와 연결된 새로운 아톰을 생성합니다.
해시는 URLSearchParams 형식이어야 합니다.
이 아톰은 양방향 바인딩을 지원합니다: 아톰 값을 변경하면 해시가 바뀌고, 해시를 변경하면 아톰 값이 바뀝니다.
이 함수는 DOM 환경에서만 동작합니다.

Parameters_cj3G2RY9jLmtvXHRPUfJBu

key (필수): localStorage, sessionStorage, 또는 AsyncStorage와 상태를 동기화할 때 사용할 고유한 문자열 키

initialValue (필수): 아톰의 초기값

options (선택사항): 아톰의 동작을 커스터마이즈하기 위한 옵션 객체

Options_SpR8jjLwpmMzcQJ4mpcpYy

serialize (선택 사항): 아톰 값을 해시로 직렬화하는 커스텀 함수. 기본값은 JSON.stringify입니다.

deserialize (선택 사항): 해시를 아톰 값으로 역직렬화하는 커스텀 함수. 기본값은 JSON.parse입니다.

subscribe (선택 사항): 해시 변경을 구독하는 커스텀 함수

setHash (선택 사항): replaceState 또는 브라우저 측에서 해시가 어떻게 업데이트되는지 설명하는 커스텀 함수. 기본값은 window.location.hash = searchParams를 통해 새로운 항목을 히스토리에 추가하는 방식입니다 (jotai-location#4)

import { useAtom } from 'jotai'
import { atomWithHash } from 'jotai-location'

const countAtom = atomWithHash('count', 1)

const Counter = () => {
  const [count, setCount] = useAtom(countAtom)
  return (
    <div>
      <div>count: {count}</div>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  )
}

Stackblitz_imfXRMfwnwL2dveoVVwVt4

아이템 삭제

아이템 삭제에 대한 사용법은 atomWithStorage를 참고하세요.