반응형에 움직이는 watcher

글 목록에서 글을 선택하면 props를 통해 id 값이 변경됩니다. DOM은 자동으로 반응하여 변경되지만, setup 함수 내에서는 이러한 변화를 어떻게 처리해야 할까요?

Watcher

Watcher는 Vue에서 데이터 변화를 감지하고 특정 로직을 실행하는 객체입니다. Vue에서 두 가지 함수를 제공합니다.

watch

watchEffect

watch

첫 번째 전달 인자에는 변화를 감지할 값을 넣습니다. 이 값이 변화하면, 두 번째 전달 인자에 들어간 함수가 실행됩니다.

javascript

      watch(감시 대상, 콜백함수, 옵션)

숫자를 증가시킬 때마다 console.log로 보여주는 예제입니다.

html

      <template>
  <button @click="counter++">{{ counter }}</button>
</template>

<script setup>
import { ref, watch } from "vue";
const counter = ref(0);

watch(counter, (newVal, oldVal) => {
  console.log("new :", newVal, ", old :", oldVal);
});
</script>

함수에 newVal, oldVal 이 전달인자로 들어오는 것을 볼 수 있습니다. 첫 번째 전달인자의 새로운 값과 이전의 값을 의미합니다.

세 번째 전달인자에 들어가는 옵션은 3가지 기능이 있습니다.

deep: 객체나 배열 등, 값의 내부 모든 변화에 반응하고 싶은 경우 (기본값: false)

immediate: 처음 값이 변하기 전에도 콜백함수를 실행합니다. (기본값: false)

flush: 콜백함수 실행 타이밍을 결정 (pre(기본값), post, sync)

javascript

      watch(counter, func, {
	deep: true,
	immediate: true,
	flush: 'post'
})

watchEffect

watch를 사용하다보면 보통 첫 번째 전달인자 값과 두 번째 함수 내에서 둘 다 사용하는 경우가 많습니다.

javascript

      const id = ref(1)
watch(id, () => {	console.log(id) });

그래서 Vue에서는 이를 좀 더 단순화시킬 수 있도록 watchEffect 함수를 제공합니다.

javascript

      watchEffect(콜백함수)

그래서 위 예제는 다음과 같이 바꿔도 똑같이 동작합니다.

javascript

      const id = ref(1)
watchEffect(() => {	console.log(id) });

콜백 함수내에서 사용되는 반응형 객체를 자동으로 추적해서 변화에 반응합니다. 뿐만 아니라 기능이 하나 더 있는데 immediate 옵션이 기본으로 들어간다는 것입니다. 즉, 처음에 바로 실행해줍니다.

글 내용에 적용하기

이제 id를 받으면 그 때 getPageBlocks 함수를 실행시킬 수 있습니다. Notion에서 해당 글에 간단한 내용을 채워넣어주세요! (내용은 아무거나 상관없습니다.)

이제 PostContent에서 watch를 사용해 props 의 변화에 반응합니다.

javascript

      import { ref, watch } from "vue";
import { NotionRenderer, getPageBlocks } from "vue-notion";

const props = defineProps(["id"]);

const blockMap = ref(null);

watch(props, () => {
  getPageBlocks(props.id).then((b) => {
    blockMap.value = b;
  });
});

이제 글이 나타나네요!

블로그 사이트를 보면 일반적으로 글 목록과 글 내용이 같이 나오지 않습니다. 따라서 상황에 따라 글 목록 또는 글 내용을 따로 보여줘야 할 필요가 있습니다. 이를 어떻게 해야 할 지에 대해서는 다음 글에서 다루겠습니다.