[Vue] 컴포지션 API 사용법

컴포지션 API란?

Vue 프로젝트의 구성요소 data, computed, methods... 등을 유연하게 구성하여 사용할 수 있도록 도와주는 API를 말한다.

 

컴포지션 API가 필요한 이유

규모가 큰 어플리케이션에서 코드 공유와 재사용을 높이기 위해 컴포지션 API를 사용한다. 일반 Vue 프로젝트에서는 data 옵션에 데이터를 등록하고 computed 옵션 안에 연산된 데이터를 등록하며 methods 옵션 안에서는 함수를 등록해 사용해준다. 프로젝트의 규모가 커져 관리해야할 data, computed data, methods 등이 늘어나게 되면 관련된 기능을 가진 코드끼리 묶어주는 것이 좋다. 이를 도와주는 API가 composition API다.

일반 Vue 프로젝트(Options API)의 로직

data 옵션에 데이터를 등록하고 computed 옵션 안에 연산된 데이터를 등록하며 methods 옵션 안에서는 함수를 등록되어 있다.

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello World',
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
  watch: {
    message(newValue) {
      console.log(newValue);
    },
  },
  created() {
    console.log(this.message);
  },
  mounted() {
    console.log(this.count);
  },
  methods: {
    increase() {
      this.count += 1;
    },
    changeMessage() {
      this.message = 'Bye World';
    },
  },
};
</script>

Composition API를 사용한 프로젝트의 로직

관련된 기능을 가진 코드끼리 묶어주었다.

<script>
import { ref, computed, watch, onMounted } from 'vue';

export default {
  setup() {
    // count와 관련된 변수와 함수
    const count = ref(0);
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    function increase() {
      count.value += 1;
    }

    // message와 관련된 변수와 함수
    const message = ref('Hello World');
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });
    function changeMessage() {
      message.value = 'Bye World';
    }

    console.log(message.value);

    watch(message, newValue => {
      console.log(newValue);
    });

    onMounted(() => {
      console.log(count.value);
    });

    return {
      count,
      doubleCount,
      increase,
      message,
      reversedMessage,
      changeMessage,
    };
  },
};
</script>

 

컴포지션 API 사용법

아래 예제에서 컴포지션 API를 사용하지 않은 코드를 컴포지션 API를 사용해 바꿔주었다.

Options API

<template>
  <h1 @click="increase">{{ count }} / {{ doubleCount }}</h1>
  <h1 @click="changeMessage">{{ message }} / {{ reversedMessage }}</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello World',
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
  watch: {
    message(newValue) {
      console.log(newValue);
    },
  },
  // 컴포넌트가 생성된 직후에 실행
  created() {
    console.log(this.message);
  },
  // HTML과 컴포넌트가 연결이된 직후에 실행
  mounted() {
    console.log(this.count);
  },
  methods: {
    increase() {
      this.count += 1;
    },
    changeMessage() {
      this.message = 'Bye World';
    },
  },
};
</script>

 

 

컴포지션 API를 사용한 코드

1. setup 컴포넌트 옵션을 등록해 그 안에서 로직을 짜준다

<script>
export default {
  setup() { ... }
}
</script>

 

2. ref를 사용해 데이터를 등록해준다. ref를 통해 만든 데이터는 반응성을 가지는 객체 데이터다. 그렇기 때문에 만들어준 데이터를 사용하기 위해서는 value에 접근해야한다. 등록한 데이터나 함수를 사용하기 위해 반드시 return 해주어야함으로 만들어준 데이터를 리턴해준다.

<template>
  <h1>{{ count }}</h1>
  <h1>{{ message }}</h1>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() { 
    const count = ref(0);
    const message = ref('Hello World');
  }
  return {
    count,
    message,
  };
}
</script>

 

3. 해당 요소가 클릭되었을때 실행할 함수를 만들어 연결해준다. 이때 만들어준 함수는 사용할 데이터와 함께 놓아 관련된 로직끼리 묶어준다. 또한 데이터를 ref를 통해 만들었기 때문에 메서드안에서 해당 데이터에 접근하기 위해 value를 사용해준다.

<template>
  <h1 @click="increase">{{ count }}</h1>
  <h1 @click="changeMessage">{{ message }}</h1>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // count와 관련된 로직
    const count = ref(0);
    function increase() {
      count.value += 1;
    }
	
    // message와 관련된 로직    
    const message = ref('Hello World');
    function changeMessage() {
      message.value = 'Bye World';
    }
    
    // 출력할때도 순서대로 작성해준다
    return {
      count,
      increase
      message,
      changeMessage
    };
  }
}
</script>

 

4. 컴포지션 API를 사용하지 않은 Vue 프로젝트에서는 반응성 데이터를 사용해 연산한 값을 사용해야할 경우 computed 옵션을 사용했다. computed 옵션의 가장 큰 장점은 데이터가 업데이트되었을때 이를 감지하고 자동으로 다시 연산해준다는 것이다. 이와 마찬가지로 컴포지션 API를 사용할때 연산된 데이터를 만들기 위해 computed라는 함수를 사용해준다. 해당 함수를 import 하고 안에 연산 로직을 넣어주면 된다.

<template>
  <h1 @click="increase">{{ count }} / {{ doubleCount }}</h1>
  <h1 @click="changeMessage">{{ message }} / {{ reversedMessage }}</h1>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // count와 관련된 로직
    const count = ref(0);
    // computed 함수를 사용해 연산된 데이터를 만들어주었다
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    function increase() {
      count.value += 1;
    }
	
    // message와 관련된 로직    
    const message = ref('Hello World');
    // computed 함수를 사용해 연산된 데이터를 만들어주었다
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });
    function changeMessage() {
      message.value = 'Bye World';
    }
    
    return {
      count,
      doubleCount,
      increase,
      message,
      reversedMessage,
      changeMessage
    };
  }
}
</script>

 

5. 데이터가 업데이트될때마다 특정로직을 실행하기 위해 watch 옵션을 사용했던것처럼 컴포지션 API에서는 watch 함수를 사용해준다. watch 함수의 첫번째 파라미터에는 감시할 데이터를 넣어주고 두번째 파라미터에는 실행하고 싶은 로직을 콜백함수 안에 넣어준다. 감시할 데이터에 변경사항이 생기면 업데이트된 데이터를 콜백함수의 파라미터로 받아 로직을 실행할 수 있다.

watch(data, (newData) => { 실행하고 싶은 로직 })

<template>
  <h1 @click="increase">{{ count }} / {{ doubleCount }}</h1>
  <h1 @click="changeMessage">{{ message }} / {{ reversedMessage }}</h1>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    // count와 관련된 로직
    const count = ref(0);
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    function increase() {
      count.value += 1;
    }
	
    // message와 관련된 로직    
    const message = ref('Hello World');
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });
    function changeMessage() {
      message.value = 'Bye World';
    }
    
    // message가 업데이트되면 콜백함수를 실행한다
    watch(message, newValue => {
      console.log(newValue);
    });
    
    return {
      count,
      doubleCount,
      increase,
      message,
      reversedMessage,
      changeMessage
    };
  }
}
</script>

 

6. 컴포지션 API를 사용한 Vue에서 라이프사이클 메서드인 created와 mounted를 사용하는 방법은 다음과 같다.

created 메서드

• created 메서드는 컴포넌트가 생성된 직후에 실행된다
• 컴포지션 API에서 setup 함수는 컴포넌트가 생성된 직후에 실행되므로 setup함수 내에서 원하는 코드를 실행해도 created 메서드를 사용하는 결과와 같다
• 즉 setup 함수에서 원하는 로직을 실행한다

mounted 메서드

• mounted 메서드는 HTML과 컴포넌트가 연결이된 직후에 실행된다
• 컴포지션 API에서 moutned 메서드를 사용하려면 onMounted라는 함수를 import해 콜백함수에 원하는 로직을 넣어준다

import { onMounted } from 'vue';
onMounted(() => { 실행할 로직 });

<template>
  <h1 @click="increase">{{ count }} / {{ doubleCount }}</h1>
  <h1 @click="changeMessage">{{ message }} / {{ reversedMessage }}</h1>
</template>

<script>
import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    // count와 관련된 로직
    const count = ref(0);
    const doubleCount = computed(() => {
      return count.value * 2;
    });
    function increase() {
      count.value += 1;
    }
	
    // message와 관련된 로직    
    const message = ref('Hello World');
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('');
    });
    function changeMessage() {
      message.value = 'Bye World';
    }
    // created 메서드를 사용한것과 같은 결과를 가진다
    // 컴포넌트가 생성된 직후에 실행된다
    console.log(message.value);

    watch(message, newValue => {
      console.log(newValue);
    });
    
    // mounted 메서드와 같은 기능을하는 onMounted 함수를 불러와 사용해준다
    // HTML과 컴포넌트가 연결이된 직후에 실행된다
    onMounted(() => {
      console.log(count.value);
    });
    
    return {
      count,
      doubleCount,
      increase,
      message,
      reversedMessage,
      changeMessage
    };
  }
}
</script>