커스텀 컴포지션 함수

<template>
  <TodoHeader :appTitle="appTitle"></TodoHeader>
  <TodoInput :todoItems="todoItems" @add="addTodo"></TodoInput>
  <TodoList :todoItems="todoItems" @remove="removeTodo"></TodoList>
</template>

<script>
import TodoHeader from '@/components/TodoHeader.vue'; //vim
import TodoInput from '@/components/TodoInput.vue';
import TodoList from '@/components/TodoList.vue';
import { onBeforeMount, ref } from 'vue';
export default {
  components: {
    TodoHeader,
    TodoInput,
    TodoList
  },
  setup() {
    //data
    const todoItems = ref([]);

    //methods
    function fetchTodos() {
      const result = [];
      for(let i = 0; i < localStorage.length; i++) {
        const todoItem = localStorage.key(i);
        result.push(todoItem);
      }
      return result;
    }

    //라이프 사이클 api가 적용된 구간
    //todoItems.value = fetchTodos();
    
    //화면이 그려지기 전에 동작
    onBeforeMount(() =>{
      todoItems.value = fetchTodos();
    })

    function addTodo(todo) {
      todoItems.value.push(todo);
    }

    return {todoItems, addTodo}
  },
  methods:{
    removeTodo(index) {
      this.todoItems.splice(index, 1);
    }
  }

  ,
  data() {
    return{
      appTitle: '할일앱'
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

위를 보면 소스가 많이 더럽지 않지만, setup안은 실무레벨에서는 엄청나게 길어 질 것으로 보인다.

 

이때에 커스텀 컴포넌트를 사용한다.

 

/hooks/useTodo.js

import { onBeforeMount, ref } from "vue";

function useTodo() {

    const todoItems = ref([]);
    
    //methods
    function fetchTodos() {
        const result = [];
        for(let i = 0; i < localStorage.length; i++) {
            const todoItem = localStorage.key(i);
            result.push(todoItem);
        }
        return result;
    }

    function addTodo(todo) {
        todoItems.value.push(todo);
    }
  
    //화면이 그려지기 전에 동작
    onBeforeMount(() =>{
        todoItems.value = fetchTodos();
    })

    return {todoItems, fetchTodos, addTodo }
}

export {useTodo}


//app.vue

import { useTodo } from './hooks/useTodo';
export default {
  setup() {
    const {todoItems,addTodo} = useTodo();
    return {todoItems, addTodo}
  },

 

useTodo.js에서 정의한 data와 methods를 다른 뷰에서 불러와 사용할 수 있다.

 

주의점이 있다.

    //화면이 그려지기 전에 동작
    onBeforeMount(() =>{
        todoItems.value = fetchTodos();
    })

위처럼 data, methods가 아닌 형태의 코드는 커스텀컴포넌트(js에 따로 뺴는경우)에 있다보면 확인이 어렵다. 이런 코드는 사용하는 .vue 파일에 두는게 옳다.