TL;DR

svelte/store를 사용합시다.

소개

커스텀 후크는 다음과 같은 사람입니다.

사용자 지정 후크 예제(React)

// カスタムフックの定義
const useCounter = () => {
  const [count, setCount] = useCounter(0)
  const increment = () => setCount(prev => prev + 1)
  return { count, increment }
}

// 使う側
const App = () => {
  const { count, increment } = useCounter()

  return (
    <>
      <span>{count}</span>
      <button onClick={increment}>+1</button>
   </>
  )
}

(간단함을 찾아 간략화하고 있습니다. 실제로는 useCallback을 사용할지 등을 생각할 필요가 있다고 생각합니다.)
커스텀 훅은 상태와 로직을 외부로 잘라 재사용할 수 있게 하거나 복잡한 로직을 숨기고 전망을 향상시킬 수 있습니다.

이것을, Svelte에서도 하고 싶다. Vue라면 CompositionAPI로 커스텀 훅을 실현할 수 있습니다만, Svelte에서는 어떨까요.

보통으로 써 보면(잘 안 가는 예)

Svelte에서는 React에서 말하는 상태를 표현하기 위해 let을 사용합니다.

svelte

<script>
  let count = 0
</script>

이것을 외부 파일로 잘라 보자.

외부 js 파일

export const useCounter = () => {
  let count = 0
  const increment = () => count++
  return { count, increment }
}

svelte 파일로 사용해 보겠습니다.

svelte 파일

<script>
  import { useCounter } from './counter'

  const { count, increment } = useCounter()
</script>

<span>{count}</span>
<button on:click={increment}>+1</button>

실행 결과

카운트가 전혀 증가하지 않습니다.
svelte 파일의 script 부분에서 let을 사용하면 리액티브한 값이 됩니다만, 외부의 js 파일로 let로 선언해도 단순한 변수입니다.

외부로 잘라낼 수 있다면,,,

Svelte로 외부로 잘라낼 수 있는, 리액티브한 값이라고 하면 표준 탑재되고 있는 store입니다.
store를 사용하면 다음과 같이 동작시킬 수 있습니다.

외부 js 파일

import { writable } from 'svelte/store'

export const useCounter = () => {
  const { subscribe, update } = writable(0)
  const increment = () => update(prev => prev + 1)
  return { count: { subscribe }, increment }
}

svelte 파일

<script>
  import { useCounter } from './counter'

  const { count, increment } = useCounter()
</script>

<span>{$count}</span>
<button on:click={increment}>+1</button>

여기에서 시도할 수 있습니다. (REPL에서 공유하기 쉬운 것도 svelte의 좋은 곳)
h tps://s 벨 손. 에 v/레 pl/7580C4426c1947d8 아 3D149 아 05bdc895? 베르시온 = 3.38.3



svelte 파일 내에서 사용할 때는 $count 와 $ 마크를 붙일 필요가 있는 것에 주의합시다.
또한 subscribe의 동작을 모르는 경우 공식 문서의 custom-store 장을 읽으십시오.

덧붙여서, 이와 같이 svelte/store를 사용해 외부에 리액티브한 값을 잘라내고 있는 Svelte 라이브러리도 많습니다.
양식 라이브러리의 felte, svelte-use-form 등이 예입니다.

후기

Svelte에서 커스텀 후크를 사용하고 싶다면 store를 사용하는 것이 하나의 방법입니다.
즉, Svelte의 store는 Redux나 Vuex의 스토어 같은 글로벌 스테이트 이외의 역할도 가지고 있다는 것입니다.
라고 하는 일도 있어, 필자는 Svelte의 store를 글로벌 스테이트로서 사용하는 경우는 ~Store 혹은 ~State 등의 명명하는 것이 좋다고 생각하고 있습니다. 이렇게 하면 커스텀 훅에서 사용하는 store(글로벌 스테이트가 아님)와 구별하기 쉬워질 것입니다.