[vue.js] Reusability & Composition

1. Composition API

1.1. Composition API

컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 하는 함수 기반의 API

 

ex) 숫자 2개를 입력받아 더해서 출력하는 코드

1) 컴포지션 x

<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: 'caculator',
            data(){
                return {
                    num1: 0,
                    num2: 0,
                    result: 0
                };
            },
            methods: {
                plusNumbers(){
                    this.result = parseInt(this.num1) + parseInt(this.num2);
                }
            }
    }
</script>

 

2) 컴포지션 API의 reactive 이용

<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, computed} from 'vue';
    export default{
        name: 'calculator',
        setup(){
            let state = reactive({
                num1: 0,
                num2: 0,
                result: computed(() => parseInt(state.num1) + parseInt(state.num2))
            });
            return{
                state
            }
        }
    }
</script>

 

setup(): Composition API에서 컴포넌트의 로직을 정의하는 함수

- setup 함수 내부에서 반환된 값을 템플릿에서 사용할 수 있음

reactive: 반응형 데이터 객체를 생성함

- 객체의 속성이 변경되면 이를 사용하는 템플릿이나 계산 속성이 자동으로 업데이트됨

- 데이터 객체 state를 생성(num1, num2, result 포함)

 

 

*reactive와 computed의 차이점

1) reactive

객체를 반응형 데이터로 변환

- 객체 내의 모든 속성이 반응형이 됨

- 데이터가 변경되면 자동으로 이를 사용하는 컴포넌트나 템플릿이 업데이트됨

2) computed

기존 데이터로부터 계산된 값을 정의

- 기본 데이터가 변경될 때 계산된 값도 자동으로 업데이트

- 새로운 값 계산, 파생된 데이터 처리

 

 

3) 코드 분리

<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, computed, toRefs} from 'vue';
    function plusCalculator(){
        let state = reactive({
            num1: 0,
            num2: 0,
            result: computed(() => parseInt(state.num1) + parseInt(state.num2))
        });
        return toRefs(state);
    }
    export default{
        name: 'calculator',
        setup(){
            let {num1, num2, result} = plusCalculator();
            return {
                num1, num2, result
            }
        }
    }
</script>

toRefs(): reactive 객체의 속성을 반응형 참조(ref)로 변환하여 반환

- 반환된 값은 객체의 속성이 아니라 vue의 ref처럼 동작함

- 반응형으로 선언된 num1, num2, result가 외부 function에서 정상적으로 동작하기 위해서는 toRefs를 사용해야 함

 

 

 

1.1.4. Provide/Inject

 

 

2. 믹스인

 

 

3. CustomDirectives

커스텀 디렉티브

const app = createApp(App);
app.directive('focus', {
    mounted(el){
        el.focus()
    }
})

 

<input type="text" v-focus />