오늘의공부(22.08.16)

조지성·2022년 8월 16일

vue

TIL

목록 보기

70/78

Composition API

vue3 버전에서 추가된 함수 기반의 API
기존에 프로젝트 규모가 커질수록 관리하기 힘든 vue2의 단점을 보완
컴포지션 API로 개발하면 기존 개발 방식으로 개발했을 때보다 연관성 있는 로직을 같이 구현할 수 있어서 훨씬 코드가 간결해지고 코드 추적 및 유지 관리가 쉬어짐

Setup

컴포지션 API를 구현하는 곳

기존

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model="num1" @keyup="plusNumbers">
      <span> + </span>
      <input type="text" v-model="num2" @keyup="plusNumbers">
      <span> = </span>
      <span>{{result}}</span>
    </div>
  </div>
</template>
<script>
export default {
  name : 'calculator',
  data() {
    return {
      num1 : 0,
      num2 : 0,
      result : 0,
    }
  },
  methods: {
    plusNumbers(){
      this.result = parseInt(this.num1) + parseInt(this.num2);
    }
  },
}
</script>
<style lang="">
  
</style>

컴포지션 API

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model="state.num1" @keyup="plusNumbers">
      <span> + </span>
      <input type="text" v-model="state.num2" @keyup="plusNumbers">
      <span> = </span>
      <span>{{state.result}}</span>
    </div>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
export default {
  name : 'calculator',
  setup () {
    let state = reactive({ //reactive를 이용해서 num1,num2,result를 실시간 변경사항에 대한 반응형 적
      num1:0,
      num2:0,
      result:0,
    });
    function plusNumbers() {
      state.result = parseInt(state.num1) + parseInt(state.num2);
    }
    return {
      state,
      plusNumbers,
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

컴포지션 API - 2

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model="state.num1">
      <span> + </span>
      <input type="text" v-model="state.num2">
      <span> = </span>
      <span>{{state.result}}</span>
    </div>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity'
export default {
  name : 'calculator',
  setup () {
    let state = reactive({
      num1:0,
      num2:0,
      //computed를 이용해서 num1 , num2가 변경이 일어나면 즉시 result로 더한 값을 반환
      result:computed(()=>parseInt(state.num1)+parseInt(state.num2)),
    });
    return {
      state,
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

컴포지션 API - 3

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model="num1" />
      <span> + </span>
      <input type="text" v-model="num2" />
      <span> = </span>
      <span>{{ result }}</span>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
function plusCalculator() {
  let state = reactive({
    num1: 0,
    num2: 0,
    //computed를 이용해서 num1 , num2가 변경이 일어나면 즉시 result로 더한 값을 반환
    result: computed(() => parseInt(num1) + parseInt(num2)),
  });
  return toRefs(state); // 반응형으로 선언된 num1 , num2 , result가 외부 function에서 정상적으로 동작하
기 위해서는
  // toRefs를 사용
   /*
    함수를 컴포넌트 밖으로 빼면 사용자가 입력한 값에 대한 반응형 처리가 불가능
    그래서 toRefs를 사용하여 컴포넌트 밖에서도 반응형 처리가 가능하도록 함
    */
}
export default {
  name: "calculator",
  setup() {
    let {num1,num2,result} = plusCalculator();
    return{
      num1,num2,result
    }
  },
};
</script>

<style lang="scss" scoped>
</style>

컴포지션 API - 4

import { computed, reactive, toRef } from 'vue';

const plusCalculator = () => {
  let state = reactive({
    num1: 0,
    num2: 0,
    //computed를 이용해서 num1 , num2가 변경이 일어나면 즉시 result로 더한 값을 반환
    result: computed(() => parseInt(num1) + parseInt(num2)),
  });
  return toRefs(state); // 반응형으로 선언된 num1 , num2 , result가 외부 function에서 정상적으로 동작하기 위해서는
  // toRefs를 사용
};

export {
  plusCalculator
};

<template>
  <div>
    <h2>Calculator</h2>
    <div>
      <input type="text" v-model="num1" />
      <span> + </span>
      <input type="text" v-model="num2" />
      <span> = </span>
      <span>{{ result }}</span>
    </div>
  </div>
</template>

<script>
import {plusCalculator} from '../common.js'
export default {
  name: "calculator",
  setup() {
    let {num1,num2,result} = plusCalculator();
    return{
      num1,num2,result
    }
  },
};
</script>

<style lang="scss" scoped>
</style>

Provide / Inject

컴포지션 API에사 provide / inject 사용하려면 provide와 inject를 별도로 import 해야 사용할 수 있음

<template>
  <div>
    <CompositionAPIInject />
  </div>
</template>

<script>
import { provide } from '@vue/runtime-core'
export default {
  components : {
    CompositionAPIInject,
  },
  setup () {
    provide('title', 'Vue.js 프로젝트'); //provide함수를 통해서 전달할 key,value 설정

    return {}
  }
}
</script>

<style lang="scss" scoped>

</style>

<template>
  <div>
    {{title}}
  </div>
</template>

<script>
import { inject } from '@vue/runtime-core'
export default {
  setup () {
    const title = inject('title');
    //inject를 사용해서 provide에서 정의한 키로 데이터를 전달받음
    return {title}
  }
}
</script>

<style lang="scss" scoped>

</style>

조지성

초보 개발자의 성장기💻

이전 포스트

오늘의 공부(22.08.15)

다음 포스트

오늘의공부(22.08.16)

TIL

Composition API

Setup

Provide / Inject

오늘의 공부(22.08.15)

Props

0개의 댓글