[Vue] 기초구조, 생명주기 일부

sanghun Lee·2020년 9월 20일
0

Today I Learned

목록 보기
49/66
post-thumbnail

Vue 기초 구조

뷰는 크게 template와 script style을 하나의 컴포넌트로 가지고 있다.
뭔가 스타일드 컴포넌트가 내재된 느낌을 지울 수 없으나 props의 응용이 그것과 같이 사용될지는 앞으로 경험하면서 알아봐야 할 것 같다.

<template> </template>

<script>
export default {};
</script>

<style scoped></style>

아래는 vue cli설정 시 App.js의 모습

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      new Vue({
        el: "#app",
        data: {},
        methods: {},
      });
    </script>
  </body>
</html>

Vue binding

신기하게도 vue는 바인딩이라는 묘한 기능으로 태그 안에서 함수나 변수를 넣어줄 수 있다. (사실 아직도 JSX 가 그립다 ..)

양방향 바인딩
v-on => @ 로 표현가능

ex)

v-on:keyup => @keyup

아래는 그래도 실제로 사용을 해본 것이다.

마우스가 해당 태그에 오버됬을 시와 leave했을 시 각각의 함수를 주었으며
v-for(map함수와 유사함)를 사용하여 데이터를 활용하였다.
재미있는건 key라는 것을 주지 않으면 애초에 화면이 렌더되지 않으며 key는 v-for 내에서 이미 정의 된 값만을 줄 수 있다는 점이다 😭

mounted

리액트의 CDM과 비슷한역할인데 created라는 라이프사이클메서드 직후 콜이 된다고 한다. 개인적으로 사용 시 created와 mounted의 큰 차이가 없었으나 설명으로는 규모가 커질 때 통신의 불안정함을 유발할 수 있으니 구별해서 사용하라는 것을 권장한다 .

나는 필요한 데이터들과 스크롤 addEventListener를 등록하기 위해 사용하였다.

간단히 설명하자면 스크롤이 올라가면서 특정버튼이 사라져야 하는데 그이벤트를 위해 moute 시 이벤트를 등록해놓고 beforeDestroy라는 라이프사이클메서드를 이용해 컴포넌트가 제거되기 직전에 해당 event를 없애주었다.

computed는 적용하고 있는 data값이 변경되기 전까지는 변동이 없고 미리 계산된 값을 가지고 있게(caching을 하고 있음) 됨
그래서 함수의 경우 적용시 {{function()}}을 해주지 않으면 객체 모습으로 자료형을 보여주고 computed의 경우 그냥 필요한 결과값이 나타나게 되는것이라고 한다.

* 참고

profile
알고리즘 풀이를 담은 블로그입니다.

0개의 댓글