[Vue] Composition API (setup, ref, .value, toRefs, reative)

 Composition API

 

프로젝트가 커지면 데이터와 관련된 함수 찾는 것도 일이다.

지금까지 했던 문법은 Options API고 Composition API를 쓰면 관련있는 코드를 한 곳에 모을 수 있다.

편한걸로 컴포넌트마다 Composition 또는 Options 선택하면 된다.

 

Composition API 써서 개발하려면 setup() 안에 코드를 짠다.

setup() 안에서 데이터 생성, 조작, methods, computed, watch, hook걸기 등

거의 모든 기능개발을 setup 한 곳에서 가능하다.

 

먼저 vue에서 {ref}를 import 해온다.

<script>
import {onMounted, ref} from 'vue';
import axios from 'axios';
export default {
    name : 'mypage',
    setup(){
        let follower = ref([]);
        onMounted(()=>{
            axios.get('/follower.json').then((a)=>{
                follower.value = a.data
            })
        }) 
        return {follower}
    }
}
</script>

setup() 안에서 데이터 생성하는 법은 ref(데이터) 함수를 사용하면 된다.

모든 데이터를 refrence data type으로 감싸야 실시간으로 반영된다.

그리고 return {}해주면 template에서 사용이 가능해진다.

 

Composition API 안에서 Ajax 요청, 데이터변경하려면 데이터.value로 수정해야한다.

오브젝트 자료형처럼 데이터를 싸매기 때문에 object 안의 값을 수정하기 위해 .value를 쓴다.

 

Lifecycle hook

 

mounted(){장착되고나서 실행할 코드}

Composition API에서 Lifecycle Hook을 쓰려면 먼저 vue에서 import를 해온 뒤

OnMounted( ()=>{실행할 코드} )와 같이 On라이프사이클함수명( () => {실행할 코드} )

 

reactive()

 

데이터만들 때는 ref()말고 reactive()도 사용이 가능하다.

차이점은 보통 reactive()는 array, object를 집어 넣고 ref는 나머지 자료형 집어 넣는다.

먼저 import 해온다. 구분해서 쓰기 귀찮아서 전부 ref 쓴다.

<script>
import {reactive, ref} from 'vue';
export default {
    name : 'mypage',
    setup(){
        let follower = ref([]);
        let test = reactive({ name : 'lee' })
        return {follower, test}
    },
}
</script>

 

toRefs()

 

composition API를 써서 개발할 때 setup() 함수 안에서는 위에 등록된 props를 this.props와 같이 가져다 쓸 수 없다.

그래서 props를 가져와서 개발을 해야할 때는 toRefs()를 쓴다.

setup() 함수 안에 파라미터를 두개까지 집어넣을 수 있는데 첫째는 자동으로 props이고 둘째는 context이다.

toRefs()는 ref를 여러번 해주는 함수다. 그리고 등호 왼쪽에 {props이름, props이름2,...} 이런 식으로 쓰면 된다.

그럼 props이름.value라고 찍으면 props가 나온다.

 

App.vue에서 Container에 먼저 props를 보내준다.

<template>
  <div>
    <Container :one="1" />
  </div>
</template>

<script>
import Container from './Container.vue';

export default {
    components: {
        Container,
    }
}
</script>

그리고 Container.vue에서 props를 받아온다. toRefs를 import 해와야 한다.

먼저 부모에서 받은 one이라는 state를 데이터자료형과 함께 props:{}에 등록하고

let {작명} = toRefs(props);를 setup(props)함수에 넣으면된다.

<script>
import {toRefs} from 'vue';
export default {
    name : 'Container',
    props : {
        one : Number,
    },
    setup(props){
        let { one } = toRefs(props);
        console.log(one.value) // 1
    },
}
</script>

 

watch

 

먼저 watch라는 함수를 import해온다.

watch(감시할 명칭, () => { 실행할코드 })

<script>
import {watch} from 'vue';
export default {
    setup(){
        watch(one, ()=>{
            //one이라는 데이터가 변경될 때 실행할코드
        })
    },
}
</script>

 

computed

 

import해온 뒤 computed(()=>{return 연산결과})

<script>
import {computed} from 'vue';
export default {
    setup(){
        let result = computed(()=>{return follower.value.length})
        console.log(result.value)
    },
}
</script>

 

useStore

 

Composition API에서 vuex store를 사용하려면 useStore를 쓴다.

<script>
import {useStore} from 'vuex';

export default {
    setup(){
        let store = useStore();
        console.log(store.state.name)
    },
}
</script>

let 변수에 담아서 state를 가져올 수 있다. $store랑 비슷하다. store.commit(), store,dispatch() 사용하면 된다.

 

methods

 

Composition API에서 methods 함수만드는 법은

<template>
  <button @onClick="doThis()">버튼</button> // 또는 doThis
</template>

<script>
export default {
    setup(){
        function doThis(){
        
        }
        return {doThis}
    },
}
</script>

 

mapState

 

Composition API에서 mapState은 현재 없고 Vuex 5버전 이상이면 될듯하다.