4. Vue.js 활용

1. Event Handling

1-1. Vue.js에서 이벤트 처리하기

 - 이벤트 듣기 (Listening to Events)

Vue.js에서는 v-on 지시자를 사용하여 DOM 이벤트를 듣고, 이벤트가 발생할 때 JavaScript를 실행할 수 있다. 이 지시자는 보통 @ 기호로 줄여 씁니다. 예를 들어, 클릭 이벤트를 듣고 싶다면 v-on:click="handler" 또는 단축형으로 @click="handler"와 같이 사용한다.

handler 값은 다음 중 하나가 될 수 있다. 

1) 인라인 핸들러 (Inline Handlers): 이벤트가 트리거될 때 실행될 인라인 JavaScript (기본 onclick 속성과 유사)

2) 메소드 핸들러 (Method Handlers): 컴포넌트에 정의된 메소드를 가리키는 속성 이름 또는 경로.

 - 인라인 핸들러 (Inline Handlers)

인라인 핸들러는 주로 간단한 경우에 사용된다.

<button @click="count++">1 추가</button>
<p>카운트는: {{ count }}</p>

 

버튼을 클릭할 때마다 count 변수의 값을 1씩 증가시키는 간단한 로직을 보여줍니다. 이러한 방식으로 Vue.js에서 이벤트 처리를 구현하고 사용자 인터랙션에 반응하는 웹 애플리케이션을 만들 수 있다.

Click_Code

<template>
    <div>
        <button @click="increaseCounter">Add 1</button>
        <p> 카운트는 : {{ count }}</p>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            count : 0
        }
    },
    setup() {},
    created() {},
    mounted() {},
    unmounted() {},
    methods: {
        increaseCounter() {
            this.count++
        }
    }
}
</script>

Change_Code

<template>
    <div>
        <select name="" id="" @change="changeCity" v-model="selectedCity">
            <option value="">==도시선택==</option>
            <option :value="city.cityCode" :key="city.cityCode" v-for="city in cityList">
            {{city.title}}                
            </option>
        </select>
        <select name="" id="">
            <option
            :value="dong.dongCode"
            :key="dong.dongCode"
            v-for="dong in selectedDongList"
            >
                {{dong.dongTitle}}
            </option>
        </select>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            selectedCity: '',
            cityList: [
                { cityCode: '02', title: '서울'},
                { cityCode: '032', title: '부천'},
                { cityCode: '051', title: '부산'},
            ],
            dongList:[
                { cityCode: '02', dongCode: '1', dongTitle:'신월1동'},
                { cityCode: '02', dongCode: '2', dongTitle:'신월2동'},
                { cityCode: '02', dongCode: '3', dongTitle:'신월3동'},
                { cityCode: '02', dongCode: '4', dongTitle:'신월4동'},
                { cityCode: '032', dongCode: '1', dongTitle:'심곡1동'},
                { cityCode: '032', dongCode: '2', dongTitle:'심곡2동'},
                { cityCode: '032', dongCode: '3', dongTitle:'심곡3동'},
                { cityCode: '051', dongCode: '1', dongTitle:'서면1동'},
                { cityCode: '051', dongCode: '2', dongTitle:'서면2동'},
                { cityCode: '051', dongCode: '3', dongTitle:'서면3동'},
            ],
            selectedDongList:[

            ]
        }
    },
    setup() {},
    created() {},
    mounted() {},
    unmounted() {},
    methods: {
        changeCity() {
            this.selectedDongList = this.dongList.filter(
                (dong) => dong.cityCode === this.selectedCity
            )
        }
    }
}
</script>

Key_Code

keyup 이벤트와 사용 가능한 키

keyup 이벤트는 키보드의 여러 키에 대응하여 사용할 수 있다. Vue.js는 키 이벤트 수식어를 통해 이를 쉽게 구현할 수 있도록 지원한다. 몇 가지 일반적인 예는 다음과 같다.

1) .enter: 엔터 키

2) .tab: 탭 키

3) .delete (캡처에는 "delete"와 "backspace"를 모두 포함)

4) .esc: ESC 키

5) .space: 스페이스바

6) .up: 위쪽 화살표 키

7) .down: 아래쪽 화살표 키

8) .left: 왼쪽 화살표 키

9) .right: 오른쪽 화살표 키

<template>
    <div>
        <input
        type="search"
        name=""
        id=""
        @keyup="checkEnter($event)"
        v-model="searchText">
        <button @click="doSearch">조회</button>
        <p>{{displayText}}</p>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            searchText: '',
            displayText: ''
        }
    },
    setup() {},
    created() {},
    mounted() {},
    unmounted() {},
    methods: {
        doSearch() {
            this.displayText = this.searchText
        },
        checkEnter(event) {
            if (event.keyCode === 13) {
                this.doSearch()
            }
        }
    }
}
</script>

<template>
    <div>
        <input
        type="search"
        name=""
        id=""
        @keyup.enter="doSearch()"
        v-model="searchText">
        <button @click="doSearch">조회</button>
        <p>{{displayText}}</p>
    </div>
</template>

 - stopPropagation과 preventDefault

이 두 메소드는 이벤트 처리에서 흔히 사용되며, 이벤트의 기본 동작을 제어하는 데 사용된다.

1) stopPropagation : 이 메소드는 현재 이벤트가 DOM 트리를 통해 더 상위로 전파되는 것을 막는다. 즉, 이벤트 버블링(bubbling)을 중지한다. 예를 들어, 한 요소에 클릭 이벤트 리스너가 있고, 그 부모 요소에도 클릭 이벤트 리스너가 있을 때, 자식 요소에서 stopPropagation을 호출하면 부모 요소의 클릭 이벤트 리스너는 실행되지 않는다.

2) preventDefault : 이 메소드는 이벤트의 기본 동작을 방지한다. 예를 들어, 링크(a 태그)를 클릭했을 때 기본적으로 발생하는 페이지 이동을 막거나, 폼 제출 시의 페이지 리로드를 방지하는 데 사용된다.

.prevent는 preventDefault를 호출하는 것과 동일하다. stop 수식어도 사용할 수 있으며, 이는 stopPropagation을 호출한다.

2. Rendering

2-1. 조건부 렌더링

 1)  v-if 디렉티브

-  v-if는 주어진 조건이 참일 때만 요소를 화면에 렌더링 한다. 

<h1 v-if="awesome">Vue는 정말 멋지죠!</h1>

 - awesome은 참(truthy) 값일 때만 <h1> 요소가 화면에 나타난다.

2) v-else 디렉티브

 - v-else는 v-if의 조건이 거짓일 때 렌더링된다.

 - v-if 디렉티브 바로 뒤에 사용해야 한다.

<h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
<h1 v-else>아닌가요? 😢</h1>

3) v-else-if 디렉티브

 - v-else-if는 v-if에 대한 추가적인 조건을 제공한다.

 - 여러 개의 v-else-if를 연결할 수 있다.

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>A/B/C 아님</div>

4) <template>에서 v-if

 - 여러 요소를 함께 토글하려면 <template> 태그에 v-if를 사용한다.

 - <template>는 렌더링되지 않으며, 내부 요소만 조건에 따라 나타난다.

<template v-if="ok">
  <h1>제목</h1>
  <p>단락 1</p>
  <p>단락 2</p>
</template>

v-if_Code

<div v-if="userRole === 'A'">
            <button>조회</button>
            <button>생성</button>
            <button>삭제</button>
        </div>

5) v-show 디렉티브

 - v-show는 요소를 조건에 따라 보여주거나 숨긴다.

 - v-show가 있는 요소는 항상 렌더링되지만, CSS로 숨김 처리된다.

<h1 v-show="ok">안녕!</h1>

6)   v-if vs v-show

 - v-if는 조건이 거짓일 때 요소를 DOM에서 제거한다.

 - v-show는 요소를 항상 렌더링하되, 보이거나 숨기는 것은 CSS로 조절한다.

 - 자주 전환되는 경우 v-show, 상태가 거의 바뀌지 않는 경우 v-if가 적합하다.

7) v-if와 v-for의 결합

 - v-if와 v-for를 함께 사용하는 것은 권장되지 않는다.

 - 두 디렉티브를 함께 사용할 경우, v-for가 먼저 평가되고 그 다음에 v-if가 평가된다.

2-2. 리스트 랜더링

1) 배열에 v-for 사용하기

 - v-for 디렉티브는 item in items 형식을 사용하여 배열의 각 요소를 반복하여 렌더링한다.

 - items는 배열이고, item은 반복되는 각 요소의 별칭이다.

<li v-for="item in items">
  {{ item.message }}
</li>

2) v-for의 인덱스 사용

 - v-for는 현재 아이템의 인덱스를 제공하는 두 번째 별칭도 지원한다.

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

3) 객체에 v-for 사용하기

 - v-for는 객체의 각 속성을 반복하는 데에도 사용할 수 있다.

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

4) 숫자 범위에 v-for 사용하기

 - v-for는 정수 값을 기반으로 템플릿을 반복할 수 있다. 

<span v-for="n in 10">{{ n }}</span>

5) <template>에서 v-for 사용하기

 - <template> 태그에 v-for를 사용하여 여러 요소를 함께 렌더링할 수 있다.

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

6) v-if와 v-for 함께 사용하기

 - v-if와 v-for를 함께 사용하는 것은 권장되지 않는다.

 - 둘을 함께 사용할 때는 v-if가 v-for보다 우선순위가 높다.

7) key를 통한 상태 유지

 - 리스트를 업데이트할 때 Vue는 key를 사용하여 각 노드의 ID를 추적한다.

 - key는 고유한 값을 가져야한다.

<div v-for="item in items" :key="item.id">
  <!-- 내용 -->
</div>

8) 컴포넌트에 v-for 사용하기

 - 컴포넌트에 v-for를 사용할 때는 key와 함께 props를 사용하여 데이터를 전달해야 한다.

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

3. Computed 와 Watch

3-1. Computed

 - 계산된 속성 (Computed Properties)

Vue.js에서 계산된 속성을 사용하여 템플릿 내의 복잡한 논리를 간단하고 효율적으로 관리하는 방법

1) 계산된 속성은 데이터의 변경에 반응하여 값을 동적으로 계산하는 속성이다.

2) 템플릿 내에서 복잡한 논리를 간소화하고 재사용하기 위해 사용된다.

 - 계산된 속성 vs 메서드

1) 계산된 속성은 의존하는 데이터가 변경될 때만 재계산된다.

2) 메서드는 템플릿이 리렌더링될 때마다 실행된다.

 - 수정 가능한 계산된 속성

1) 계산된 getter 함수는 순수한 계산만 수행해야 한다 (사이드 이펙트 없음)

2) 계산된 속성에서 반환된 값은 읽기 전용으로 처리되어야 한다.

3) Vue.js에서 계산된 속성은 복잡한 템플릿 논리를 간결하고 효율적으로 만들어준다.

4) 데이터가 변경될 때만 재계산되어 성능 최적화에 도움이 된다.

5) 템플릿 내에서 반복되는 논리를 효과적으로 재사용할 수 있다.

3-2. Watch

1) 감시자는 Vue 인스턴스의 데이터나 계산된 속성이 변경될 때 실행되는 함수다.

2) 데이터 변경에 대한 반응으로 비동기 작업을 수행하거나 DOM을 변경하는 등의 사이드 이펙트를 관리한다.

 - 감시 대상 타입

1) watch의 첫 번째 인자는 ref, 반응형 객체, 게터 함수 또는 여러 소스의 배열일 수 있다.

 - 깊은 감시자 (Deep Watchers)

1) 반응형 객체를 감시할 때는 deep 옵션을 사용하여 객체의 모든 중첩 속성 변경을 감시한다.

 - 열성적인 감시자 (Eager Watchers)

1) immediate: true 옵션을 사용하여 감시자의 콜백이 즉시 실행되도록 설정할 수 있다.

2) 감시자를 사용할 때는 성능 영향을 고려해야 한다. 특히 깊은 감시를 사용할 때는 주의가 필요한다.

3) 감시자는 데이터 변경에 대한 반응으로 사이드 이펙트를 수행하는 데 적합하지만, 데이터 자체를 변경하는 것은 피해야한다. 

4) Vue.js의 감시자는 데이터의 변경을 감시하고, 이에 대응하는 행동을 정의하는 강력한 방법이다. 

5) 감시자를 사용하여 복잡한 논리를 효과적으로 처리하고, 데이터 변경에 따른 사이드 이펙트를 관리할 수 있다.

4. LifeCycle Hook

4-1. 생명 주기 훅 개요

1) Vue 컴포넌트는 생성부터 소멸까지 여러 단계의 생명 주기를 거친다.

2) 이러한 각 단계에서 개발자가 정의한 로직을 실행할 수 있는 생명 주기 훅이 존재한다.

3) 데이터 감시 설정, 템플릿 컴파일, DOM 마운트, 데이터 변경에 따른 DOM 업데이트 등이 포함된다.

4-2. 생명 주기 훅 등록하기

1) onMounted 훅은 컴포넌트가 DOM에 마운트된 후 실행된다.

4-3. 일반적으로 사용되는 훅

1) onMounted: 컴포넌트가 마운트된 후 실행된다.

2) onUpdated: 컴포넌트가 업데이트(재렌더링)된 후 실행된다.

3) onUnmounted: 컴포넌트가 제거되기 전에 실행된다.

4-4. 훅 사용 시 주의사항

1) 훅은 동기적으로 등록해야 하며, setTimeout과 같은 비동기 작업 내에서 사용하면 안된다.

2) setup 함수 내에서 onMounted를 사용할 때는 컴포넌트 인스턴스에 대한 접근이 불가능하다 (this 키워드 사용 불가).

4-5. 생명 주기 훅의 종류

1) Vue 컴포넌트는 다양한 생명 주기 훅을 제공하며, 각 훅은 컴포넌트 생명 주기의 특정 시점에 호출된다.

2) 각 훅의 목적과 사용 사례에 대한 자세한 정보는 Vue 문서에서 확인할 수 있다.