[Vue.js 3] Router / Event Bubbling / 객체 비교

프로젝트로 배우는 Vue.js 3

 

이 포스팅에서 작성하는 내용은 프로젝트로 배우는 Vue.js 3 에서 발췌하였습니다.

 

https://inf.run/sxQT

프로젝트로 배우는 Vue.js 3 - 인프런 | 강의

---

Router

Vue.js 에서 컴포넌트간 이동을 위해서는 Router 기능을 사용해야 한다.

npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router';
import Page1 from '../pages/page1/index.vue';
import Page2 from '../pages/page2/index.vue';
import Page2 from '../pages/PageDetail/index.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/Page1',
            name: 'Page1',
            component: Page1
        },
        {
            path: '/Page2',
            name: 'Page2',
            component: Page2
        },
        {
            path: '/Page/:pageId',
            name: 'PageDetail',
            component: PageDetail
        }
    ]
});

export default router;

Router 설정은 사용은 위와 같이 routes 안에 path(링크 주소), name(이름), component(컴포넌트)를 넣어주면 된다.

 

 

Router를 이용해서 이동하는 방법

 

1. router-link 를 이용하는 방법

<template>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <router-link class="navbar-brand" :to="{ name: 'Page1'}">
      Page1
    </router-link>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <router-link class="nav-link" :to="{ name: 'Page2'}">
          Page2
        </router-link>
      </li>
    </ul>
  </nav>
  <div class="container">
      <router-view/>
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

 

 

2. router-link 를 이용하는 방법

<template>
...
</template>
<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const moveToPage = (id) => {
      // router.push(`/Page/${id}`);
      router.push({
        name: 'PageDetail',
        params: {
          pageId: id
        }
      });
    }  		
    ...
  }
}
</script>

<style>

</style>

• router.push 를 이용해서 컴포넌트간 페이지 이동을 구현할 수 있다.
• 위 주석 처리한 부분으로도 사용 가능하다.
• name을 사용했을 때의 장점은 추후에 유지보수성에서 용이하다.
  (주소가 변경되었을 때, 주소를 변경하지 않아도 됨. 이름은 그대로이기 때문)
• 주소에 파라미터를 넘겨줘야할 때
  • 주소로 표현하는 경우, 라우터 설정에서 정의한 형식대로 파라미터를 넣는다.
  • name으로 표현하는 경우, params 에 파라미터를 넣어준다. 
    (파라미터 이름은 라우터 설정에서 정의한 파라미터 이름과 동일해야 한다.)

 

 

 

Event Bubbling

<template>
...
  <button 
    @click.stop="clickEvent(index, $event)"
  >
  Delete
  </button>
</template>
<script>
...
}
</script>

<style>

</style>

• EventBubbling: 이벤트가 발생했을 때, 상위 컴포넌트로 전달되는 현상.
• 이를 막기위해서는 아래와 같이 이벤트 뒤에 stop을 넣어주면 된다.
• $event : 이벤트 변수 (해당 컴포넌트의 value 등을 가져올 수 있음)

 

 

 

객체 비교

원시 타입

• 문자, 정수와 같은 기본적인 타입
• 비교와 복사 모두 값을 기준으로 함

 

참조 타입

• 객체, 배열과 같은 타입
• 비교와 복사 모두 '주소' 를 기준으로 함

 

참조 타입 복사 방법

a = {
  name: 1
};

b = a;		// a의 주소를 b에 복사
c = {...a}; // a의 값을 b에 복사

 

참조 타입 비교 방법

a = {
  name: 1
};

c = {...a}; // a의 값을 b에 복사

// 1. JSON.stringify 비교 방법
console.log(JSON.stringify(a) == JSON.stringify(b));

// 2. lodash 라이브러리 이용
import _ from 'lodash';
console.log(_.isEqual(a, b);

• 1번 방식의 JSON 객체를 String으로 변환해서 사용하는 방법은 추천되지 않는다.
  (객체 내부의 순서가 변경되는 경우, 제대로 비교 불가)
• 2번 방식의 lodash 라이브러리를 이용하면 참조 타입간에 편하게 비교가 가능하다.

https://www.npmjs.com/package/lodash

lodash