Vue.js 3 이벤트

웹 개발을 할 때 이벤트라는것은 어떤 행동을 했을 때 어떤 일이 일어나는것을 의미합니다.

 

클릭이벤트가 일어나는 예제입니다.

먼저 css는 부트스트랩을 이용하였습니다.

index.html에 부트스트랩 CDN을 링크해주었습니다.

 

 

 

<button>태그를 만들고 class를 넣어주어 부트스트랩의 css를 이용한 버튼을 만들었습니다.

 

 

 

 

<button>태그 속성에 v-on:click 속성을 넣어주고 속성값으로 consoleLog함수를 넣어주었습니다.

consoleLog함수는 버튼을 클릭하였을때 console.log에 'hello world'라는 스트링값이 뜨도록 만들었고 이 함수가 <template>에 접근할 수 있도록 return에 넣어주었습니다.

 

 

 

이번에는 버튼을 클릭하면 버튼위의 'inyoung'이 'inyoung world'로 바뀌게 코드를 작성해보겠습니다.

먼저 버튼을 클릭하면 이름이 바뀌는 updateName이라는 함수를 만들었습니다.

그 다음 updateName를 return에 넣어 <template>에 접근할 수 있도록 만들고 

버튼의 v-on:click 속성에 속성값을 updateName로 설정하였습니다.

**원래 const를 사용했는데 const는 바뀌지않아 let으로 변경하였습니다.

 

그런데 결과화면을 보니 버튼을 클릭해도 이름이 바뀌지않습니다.

그래서 console.log를 이용하여 name값을 확인해보니 콘솔로그로 봤을때는 버튼 클릭시 이름이 정상적으로 바뀌는것을 확인 할 수 있었습니다. 즉, 변수의 값은 바뀌는데 <template>안(화면안)에서는 바뀌지않는것을 알 수 있습니다.

 

 

데이터의 값과 화면의 값이 일치가 

Vue.js 컴포지션 API를 사용할때 일반 변수를 사용하면 리턴이 되면서 템플릿에서 사용되는 값이 변수 값을 변경한다고 해서 바뀌지않습니다. 그래서 Vue.js에서는 기능을 제공하고있습니다. 바로 ref입니다.

 

 

먼저 ref를 import시킵니다.

그 다음 변수 name의 값을 ref()함수 안에 넣어줍니다.

그리고 updateNamed의 name의 value값을 입력합니다.

그러면 변수name의 ref에 value값이 업데이트가 되면서 <template>에서도 업데이트가 됩니다.

이렇게 하면 버튼을 클릭하면 이름이 바뀌는것을 확인 할 수 있습니다.

 

 

 

 

ref안에는 스트링뿐만 아니라 숫자, 오브젝트, 배열 등이 들어올 수 있습니다.

ref를 사용할때는 그 값을 변경할때 value를 붙여줘야합니다.

스트링이나 숫자를 사용할때는 반드시 ref를 사용해야하는데 오브젝트나 배열을 사용할 때에는 reactive를 사용할 수도 있습니다. reactive를 사용하면 value가 필요 없으며 reactive를 사용할때에도 반드시 import를 시켜줘야합니다.

 

 

 

 

 

 

 

**위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다.

유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!