알면 좋은 Vue.js 몇가지 패턴

안녕하세요? 오랜만에, 또 포스팅을 합니다!
오늘은 알아두면 좋은 Vue.js 코딩 패턴에 대해서 소개를 드리도록 하겠습니다!

pattern : 되풀이 되는 사건, 되풀이 되는 형태 또는 문양
IT 에서 의미하는 패턴은 상황에 따라 자주 쓰이는 코딩 방식이라고 이해하시면 됩니다!

1. AsyncComponent (Vue.js 2.3+)

Vue.js 2.3 의 새로운 기능으로, 비동기 컴포넌트를 아래와 같은 형식으로 정의가 가능합니다.

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
});

3.x 구문은 아래와 같습니다.

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// Async component without options
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'));

// Async component with options
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
});

비동기적으로 컴포넌트를 불러와 사용이 가능합니다.
Vue-Router 에서 지연로딩(lazy-loading)과 유사한 매커니즘입니다. Vue-Router 로 경로(path)와 컴포넌트를 매칭할때 defineAsyncComponent 를 사용하지 말라고 문서에서 설명해주고 있습니다.

비동기 컴퍼넌트를 쉽게 작성이 가능하며, 이걸 통해서 로딩상태처리도 쉽게 가능합니다.

2. v-once 를 활용한 렌더링 캐싱

v-once 지시어는 한번만 렌더링을 하고, 이후에 값을 변경해도 이전에 렌더링한 결과를 유지합니다.

3. JSX

Vue.js 도 JSX 방식으로 작성이 가능합니다! 혹시라도 React 를 개발하시다가 넘어오더라도 걱정마세요.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ name }}</p>
    <EcoComponent/>
  </div>
</template>

<script>

import {defineComponent, ref} from "vue";

const EcoComponent = defineComponent({
  name: 'EcoComponent',
  setup() {

    const number = ref(0);
    const handleIncreaseClick = () => {
      number.value++;
    };

    return () => (
        <div>
          <h3>Ecosystem</h3>
          <ul>
            <p>응애 나는 애기 바론! {number.value}</p>
            <button onClick={handleIncreaseClick}>number increase</button>
          </ul>
        </div>)

  }
});

export default {
  name: 'HelloWorld',
  components: {EcoComponent},
  setup(props) {

    const name = ref('katanazero');

    return {
      msg: props.msg,
      name,
    }
  }

}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

주의할점은 JSX 구문 시, .value 를 해줘야한다는 점 및 스타일에 대해서 따로 처리를 해줘야 한다.

4. composition API 사용시, reactive 관심사 분리하기

export default {
  setup() {
    // destructure without losing reactivity bc of toRefs
    const { search, findString, autoComplete } = configureSearch();

    return {
      search,
      findString,
      autoComplete,
    };
  },
};

// 관심사에 따라 분리
function configureSearch() {
  const state = reactive({
    search: "",
    findString: "",
    autoComplete: "",
  });

  return toRefs(state);
}

toRefs 는 리액티브(reactive) 객체를 가져와 ref 로 변환해줍니다.
reactivity(반응성)를 잃지 않고 반환된 값을 destructure/spread 할수 있기 때문에, 컴포지션 함수등에서 유용하게 사용할수 있습니다.
해당 컴퍼넌트내에서 관심사가 같은 상태끼리 분리하기 좋은 코드입니다.