[Svelte] Readable stores

Svelte 스토어는 기본적으로 읽기와 쓰기가 가능하지만, 모든 상황에서 값을 직접 변경하는 것은 적절하지 않습니다. 예를 들어 마우스 위치나 사용자의 위치 정보와 같은 스토어는 외부에서 임의로 값을 설정할 수 없어야 합니다. 이러한 경우 읽기 전용 스토어를 사용할 수 있습니다.

---

읽기 전용 스토어 만들기

읽기 전용 스토어는 readable 함수를 사용하여 만듭니다. readable 함수는 두 가지 인수를 받습니다.

• 초기값 : 스토어의 초기 값입니다. 아직 값이 없다면 null 또는 undefined 를 사용할 수 있습니다.
• start 함수 : 스토어 구독자가 처음 연결될 때 호출되는 함수입니다. 두 가지 인수를 받습니다.
  • set 함수: 스토어 값을 업데이트하는 함수입니다. 읽기 전용 스토어에서는 외부에서 호출할 수 없습니다.
  • stop 함수: 마지막 구독자가 연결을 해제할 때 호출되는 함수입니다. 타이머 해제 등 필요한 정리 작업을 수행합니다.

 

---

예시: 시간 스토어

// stores.js
export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date()); // 스토어 값 업데이트 (내부 함수에서만 호출)
  }, 1000);

  return function stop() {
    clearInterval(interval); // 타이머 해제
  };
});

위 코드는 time이라는 읽기 전용 스토어를 만듭니다.

• 초기값으로 현재 시간 (new Date())을 설정합니다.
• start 함수는 다음과 같은 작업을 수행합니다.
  • 1초 간격으로 타이머를 설정합니다.
  • 타이머가 실행될 때마다 set 함수를 호출하여 스토어 값을 새로운 시간 객체로 업데이트합니다. (외부 코드에서 set 함수를 직접 호출할 수 없습니다.)
• stop 함수는 타이머를 해제하여 리소스 누수를 방지합니다.

---

읽기 전용 스토어 사용 장점

• 데이터의 일관성 유지 : 외부 코드에서 실수로 값을 변경하는 것을 방지합니다.
• 상태 관리 : 복잡한 로직을 start 함수에 포함시켜 스토어 업데이트를 제어할 수 있습니다.
• 부가 효과 처리 : 타이머 설정과 같은 부가적인 작업을 start 및 stop 함수에서 처리할 수 있습니다.

---

전체 코드

<!-- App.svelte -->
<script>
  import { time } from './stores.js';

  const formatter = new Intl.DateTimeFormat(
    'en',
    {
      hour12: true,
      hour: 'numeric',
      minute: '2-digit',
      second: '2-digit'
    }
  );
</script>

<h1>The time is {formatter.format($time)}</h1>

// stores.js
export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date()); // 스토어 값 업데이트 (내부 함수에서만 호출)
  }, 1000);

  return function stop() {
    clearInterval(interval); // 타이머 해제
  };
});

---

출처 : https://learn.svelte.dev/tutorial/readable-stores