SvelteKit에서 "localStorage"를 이용해 배열 순서 변경 관리하기

 

SvelteKit에서 데이터를 저장하고, 페이지 리프레시 없이 배열 순서를 동적으로 변경하는 방법에 대해 알아보겠습니다. 특히, `localStorage`를 사용하여 사용자 설정을 유지하면서 배열 순서를 변경하는 방법을 설명합니다.

문제 상황

기본적으로 배열의 순서를 변경하려면 버튼 클릭 시 `isReversed`와 같은 상태 값을 관리해야 합니다. 그런데 SvelteKit에서 `localStorage`를 활용하여 사용자가 변경한 설정을 저장하고, 페이지를 새로 고침하더라도 설정이 유지되도록 구현하는 방법을 소개합니다.

코드 예시

<script>
  import { onMount } from 'svelte';

  let db_data = [
    { _id: 1, name: "Item 1" },
    { _id: 2, name: "Item 2" },
    { _id: 3, name: "Item 3" },
  ];

  let isReversed = false;

  // 클라이언트에서만 로컬 스토리지에 접근하기
  onMount(() => {
    if (typeof window !== 'undefined') {
      const storedValue = localStorage.getItem('isReversed');
      if (storedValue !== null) {
        isReversed = JSON.parse(storedValue);
      }
    }
  });

  // 배열 순서를 바꾸는 함수
  function toggleOrder() {
    isReversed = !isReversed;

    // 변경된 순서를 로컬 스토리지에 저장
    if (typeof window !== 'undefined') {
      localStorage.setItem('isReversed', JSON.stringify(isReversed));
    }
  }

  // 배열 순서를 바꾸기 위해 복사본을 뒤집는 함수
  $: orderedData = isReversed ? [...db_data].reverse() : db_data;  // $: reactive statement
</script>

<!-- 버튼 클릭으로 배열 순서 변경 -->
<button on:click={toggleOrder} class="bg-blue-500 text-white p-2 rounded">
  {#if isReversed} 차례대로 출력 {#else} 역순으로 출력 {/if}
</button>

<!-- 배열 순서에 따라 출력 -->
{#each orderedData as db (db._id)}
  <div>{db.name}</div>
{/each}
  

핵심 포인트

1. $: (reactive statement)를 사용하여 orderedData를 동적으로 계산합니다. 2. toggleOrder 함수에서 버튼 클릭 시 isReversed 값을 변경하고, 이를 localStorage에 저장합니다. 3. 클라이언트에서만 localStorage에 접근하도록 onMount와 typeof window !== 'undefined' 체크를 추가하여 서버 사이드 렌더링 시 오류를 방지합니다.

동작 원리

1. 페이지가 처음 로드되면 onMount 라이프사이클을 사용하여 로컬 스토리지에서 이전에 저장된 배열 순서를 불러옵니다. 2. 버튼을 클릭하면 isReversed 값이 반전되어 배열의 순서가 바뀝니다. 3. 변경된 순서는 localStorage에 저장되어 페이지를 새로 고침하더라도 사용자의 설정이 유지됩니다.

결론

이 방법을 사용하면 SvelteKit에서 배열 순서를 사용자의 입력에 따라 동적으로 변경하고, 그 상태를 페이지 리프레시 후에도 유지할 수 있습니다. 또한, localStorage를 활용하여 페이지 새로 고침 시에도 데이터 상태가 유지되도록 만들 수 있습니다.

 

이 방식으로 얻을 수 있는 이점은 기본적으로 SSR에 기반하여 페이지를 구성했을 때, DB에 데이터를 재요청하지 않고 이미 로드된 데이터들로 클라이언트 측의 조정만으로 재구성을 할 수 있기에 DB에 부담을 줄일수 있다는 점과 부가적으로 DB에서 다시 받아오는 것보다 빠른 처리속도를 기대할 수 있다는 점입니다.