<div id="readability-page-1" class="page"><div><p><h2 id="d5cd"><code>customRef를 활용하여</code></h2></p><h2 id="81b5">스토리</h2><p id="59c9">간단한 카운터를 구현한다. 사용자가 카운팅한 값을 스토어에 저장한다. 스토어에 저장된 값이 로컬스토리지에도 저장되어, 페이지가 리프레시 되더라도 최종 카운팅 값이 유지되도록 한다.</p><h2 id="28d6">솔루션</h2><ul><li id="d1f4">데이터가 변경이 될 때마다 로컬스토리지에 저장되어야한다. 반대로 리프레시 되었을때 변수에 로컬스토리지의 데이터가 할당되어야 한다. 이 동기화 처리를 간단히 구현할 수 없을까?</li><li id="412a">Vue3의 <strong>customRef</strong> 를 활용하면 Ref의 get/set 동작을 커스텀할 수 있는 기능이 있다. 여기에 로컬스토리지와 동기화를 도와주는 기능을 추가한다. 이로서 복잡한 동기화 처리를 단순화시킬 수 있고 사용이 간편해진다.</li></ul><h2 id="e3a7">useCount.js</h2><p id="f134">우선 상태 <code>count</code> 를 정의하는 컴포저블 useCount을 만들자.</p><figure></figure><h2 id="052c">Count.vue</h2><p id="d187">간단한 카운터 뷰를 만들어보자. useCount의 <code>count</code> 라는 상태를 표시하고 조작한다.</p><figure></figure><p id="def5">이렇게만 할 경우 리프레시하면 상태에 저장되었던 <code>count</code>상태 값은 사라지게 된다. 상태를 유지하기 위해 아래와 같은 작업을 추가해보자.</p><h2 id="fba2">custome-refs.js</h2><p id="5c9a">vue3에서는 <a href="https://vuejs.org/api/reactivity-advanced.html#customref" rel="noopener ugc nofollow" target="_blank">customRef()</a> 함수를 제공하는데, 이것은 의존성 추적과 업데이트 트리거를 명시적으로 제어할 수 있다. 이 함수는 <code>track</code>과 <code>trigger</code> 함수를 매개변수로 받고 <code>get</code>, <code>set</code> 메소드로 구성된 객체를 리턴해야 한다.</p><p id="29ac">이것을 활용하여 로컬스토리지 값과 연동되는 로직이 추가된 ref 함수를 만들어보자.</p><figure><figcaption>CustomRef</figcaption></figure><p id="1c03">위 CustomRef 함수로 만든 변수에 값을 할당하면 값을 동시에 로컬스토리지에 저장하고 값을 사용할때는 로컬스토리지에 저장된 값을 우선 사용하게 된다.</p><h2 id="6704">useCount.js 다시 작성</h2><p id="8acb">CustomRef를 적용하여 다시 작성해보자.</p><p id="5781">사용법은 간단하다.<code>const count = ref('');</code> 대신에 <code>const count = new CustomeRef('', 'count');</code> 라고 작성한다.</p><figure></figure><p id="be8e">counter.vue 의 내용은 변경이 필요없다. 컴포저블에서 ref를 생성할때만 CustomRef 함수로 생성을 하면 간단히 로컬스토리지와 연동된 상태를 구현할 수 있다.</p><p id="16e4">마지막으로 브라우저 화면에서 카운터를 변경한후 리프레시를 해보자.</p></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

customRef를 활용하여
스토리
간단한 카운터를 구현한다. 사용자가 카운팅한 값을 스토어에 저장한다. 스토어에 저장된 값이 로컬스토리지에도 저장되어, 페이지가 리프레시 되더라도 최종 카운팅 값이 유지되도록 한다.
솔루션
데이터가 변경이 될 때마다 로컬스토리지에 저장되어야한다. 반대로 리프레시 되었을때 변수에 로컬스토리지의 데이터가 할당되어야 한다. 이 동기화 처리를 간단히 구현할 수 없을까?
Vue3의 customRef 를 활용하면 Ref의 get/set 동작을 커스텀할 수 있는 기능이 있다. 여기에 로컬스토리지와 동기화를 도와주는 기능을 추가한다. 이로서 복잡한 동기화 처리를 단순화시킬 수 있고 사용이 간편해진다.
useCount.js
우선 상태 count 를 정의하는 컴포저블 useCount을 만들자.
https://medium.com/media/3d2ea95d7d1abcfc0105734f62729bf0/href
Count.vue
간단한 카운터 뷰를 만들어보자. useCount의 count 라는 상태를 표시하고 조작한다.
https://medium.com/media/3b0b7414cc111c26f3637b78a902b598/href
이렇게만 할 경우 리프레시하면 상태에 저장되었던 count상태 값은 사라지게 된다. 상태를 유지하기 위해 아래와 같은 작업을 추가해보자.
custome-refs.js
vue3에서는 customRef() 함수를 제공하는데, 이것은 의존성 추적과 업데이트 트리거를 명시적으로 제어할 수 있다. 이 함수는 track과 trigger 함수를 매개변수로 받고 get, set 메소드로 구성된 객체를 리턴해야 한다.
이것을 활용하여 로컬스토리지 값과 연동되는 로직이 추가된 ref 함수를 만들어보자.
https://medium.com/media/690f8d21ddcd2a413a1306f50dd139b8/href
위 CustomRef 함수로 만든 변수에 값을 할당하면 값을 동시에 로컬스토리지에 저장하고 값을 사용할때는 로컬스토리지에 저장된 값을 우선 사용하게 된다.
useCount.js 다시 작성
CustomRef를 적용하여 다시 작성해보자.
사용법은 간단하다.const count = ref(''); 대신에 const count = new CustomeRef('', 'count'); 라고 작성한다.
https://medium.com/media/fa4ca767bb10a34fbdad87473990ea83/href
counter.vue 의 내용은 변경이 필요없다. 컴포저블에서 ref를 생성할때만 CustomRef 함수로 생성을 하면 간단히 로컬스토리지와 연동된 상태를 구현할 수 있다.
마지막으로 브라우저 화면에서 카운터를 변경한후 리프레시를 해보자.
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기 해주세요.

[Vue3] 상태와 로컬스토리지 연동하기

댓글