일상코딩/노트

Vue3 : Intro

코딩애벌레 2024. 4. 25. 09:46

드디어 독립된 Frontend 영역에 들어오게 되었다. Vue가 오래되진 않았지만, 생각보다 쓰기 쉽고 직관적인 프레임워크라 매력적인 것 같다. 사실 이젠 어떤 프레임워크인지 크게 중요하다 생각들지 않고 어떻게 사용하는지가 중요하기 때문에 바로 가보자고.

Vue.js

: 사용자 인터페이스를 구축하기 위한 JavaScript 프레임 워크

 

: 선언적 렌더링 (Declarative Rendering)

=> Vue 자체에서 표준 HTML을 확장하는 "템플릿 구문"을 사용하여 JavaScript 상태(데이터)를 기반으로 화면에 출력(렌더링)될 HTML을 선언적으로 작성한다

 

: 반응성 (Reactivity)

=> JavaScript 상태(state) 변경을 추적하고, 변경사항이 발생하면 자동으로 DOM을 업데이트한다

 

: 가상 DOM (Virtual DOM)

=> 가상 DOM을 통해 JavaScript 단에서 실제 DOM 복사본을 사용해 빠른 렌더링을 구현한다.

 


Vue 작성

 

우리는 CDN 방식이 편하기 때문에 공식 홈페이지를 참고하여 코드를 작성할 예정이다. 혹시나 유의해야 할 점은 Vue3 버전인 것을 잊지말자. 간혹가다 Vue2 페이지에서 헤매는 경우도 있다.

quick-start 페이지에서 스크롤 조금만 내리면 호출 스크립트가 있다.
Vue 사용할 때마다 항상 적어줘야하는 큰 틀이다

  • 전역 Vue 객체 호출 : CDN에서 Vue를 사용하는 경우 전역 Vue 객체를 불러온다
  • Application instance : 모든 Vue 애플리케이션은 createApp 함수로 새 Application instance를 생성하는 것으로 시작
  • .mount() : HTML 요소에 Vue 애플리케이션 인스턴스 탑재, 각 앱 인스턴스에 대해 mount()는 한 번만 호출 가능

 


ref (), reactive()

 

: 반응형 상태(데이터)를 선언하는 함수 (Declaring Reactive State)

  • .value 속성이 있는 ref 객체로 래핑(wrapping)하여 반환하는 함수
  • ref로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 템플릿이 자동으로 업데이트
  • 모든 타입을 인자로 받을 수 있음
  • ref() : 변수를 반응형으로 만들때 사용
  • reactive() : 객체를 반응형으로 만들때 사용

RefImpl 은 ref 함수로 생성된 객체의 내부의 구현들(포장지)

 

ref를 사용하면서 많이 어려움이 생길 예정이다. 이유는 ref를 생략하여 .value 접근을 하면 안되는 경우가 있고, 혹은 .value를 사용해야만 접근 가능한 경우가 굉장히 다양하다. 초반엔 시행착오가 있겠지만, 천천히 하나씩 경험하면 될 것 같다.

 

console창에서 출력은 완료되었다. 그렇다면 템플릿에 전달 및 접근하려면 어떻게 해야할까? 결국 setup도 함수의 형태를 띄기 때문에 필요 데이터들을 return 해주면 된다.

return을 통해 message가 전달되어 html에서 {{}}을 통해 렌더링 된다
전달되어 html에 출력된 text
변수가 아닌 동적 객체로 전달
동적 객체의 출력 결과
반응형 변수를 추적해서 값을 변경하고, 화면에 렌더링 된다.
위의 예시를 살펴보면서 어떻게 진행되는지 보자.

 

먼저, 오른쪽이 가장 초기 화면이다. {{ count }}에서 ref(0)으로 감싸진 0은 최상위 ref()이므로 보간법에 의해 내부 데이터 0이 출력된다. v-on:click 의 경우에는 다음 포스트에서 배울예정, 간단하게 javascript에서 했었던 addEventListner의 역할을 한다. 그럼 이벤트 클릭시 발생되는 순서를 살펴보자.

javascript에서 진행했던 메커니즘과 거의 유사하다. 다만 코드가 굉장히 간결하다는 장점이 있다.

 

아직 데이터 저장을 하는 단계는 아니지만 django에 비하면 딸깍으로 모든게 처리되는 기분이라 현타가 조금 온다.


{{  }} : Mustache syntax(콧수염 구문) 보간법

 

  • 감싸져 있는 최상위 속성 ref()나 reactive()를 벗겨내고 html 템플릿에서 사용가능한 데이터로 가공 
  • 출력 시 ref()로 감싸진 데이터는 자동으로 언래핑을 통해 내부 데이터를 참조한다.
  • 반환된 데이터(객체)의 값을 기반으로 동적 텍스트를 렌더링
  • 데이터는 식별자나 경로에만 국한되지 않으며 유효한 JavaScript 표현식 사용 가능

message를 나누어 뒤집고 사이에 .을 삽입한다
놀라운 결과물

 

+ 유의사항

 

 

Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

 

최상위 속성이 ref가 아니라면 내부에 접근할 때, ref 객체로써 남아있게된다. 다음 예시를 살펴보자

먼저 다른점은 objectOne의 경우 최상위 속성에 ref가 아닌 객체 자체이며, objectTwo는 최상위 속성이 ref로 감싸져있다. 헷갈리기전에, 감싸져 있다는 것은 감춘다의 의미는 아니다. 오히려 내부를 언래핑해줄 수 있는 요소다. 

 

1. {{objectOne}}  //  { "id" : 0 }

과정에서 unwrapping은 일어나지 않는다. 근데 왜 ref(0) => 0으로 출력되었을까? 이는 출력을 위해 Vue에서 ref()에 감싸진 데이터를 열어본 것이다. 출력값만 보고 unwrapping이 일어났다고 오해하면 안된다.

 

2. {{objectOne.id}}  //  0

과정에서 objectOne.id는 ref(0)을 의미하고 이는 보간법에 의해 '출력 시' 내부를 참조 할 수 있다. 즉, 0을 반환한다.

 

3. {{objectOne.id + 1}}  //  [object Object]1

과정에서 objectOne.id는 ref(0)임을 위에서 확인했다. 하지만, '출력 전' 연산이 발생하며, objectOne.id는 최상위 속성의 ref()가 아니기 때문에 object로 존재한다. 따라서 [object Object]1 를 반환한다.

 

4. {{objectOne.id.value + 1}} // 1

과정에서 objectOne.id는 ref(0)이었고 .value를 통해 내부 데이터를 직접 꺼내기 때문에 0 + 1로 연산되어 1을 반환한다. 이때, 보간법에 의한 표현은 없다.

 

5. {{objectTwo}}  //  { "id" : 0 }

과정에서 objectTwo는 최상위 ref()며, {{}} 보간법에 의해 unwrapping된다. 따라서  { "id" : 0 }를 반환한다

 

6. {{objectTwo.id}}  //  0

과정에서 objectTwo.id는 ref(0)을 의미하며, 이미 최상위 ref() 포함 {{}} 보간법에 의해 unwrapping된다. 따라서 0을 반환한다

 

7. {{objectTwo.id + 1}}  //  1

과정에서 objectTwo.id는 objectTwo가 이미 최상위 ref()이므로 내부 데이터의 자동 언래핑이 진행된다. 즉, objectTwo.id 는 ref(0)이 아닌 0이 되고 연산되어 1로 반환된다.

 

그렇다면  {{objectOne.id + 1}} 의 id를 사용하고 싶다면?

위의 방법을 통해 id를 최상위 속성으로 분해하여 접근하면 원하는 결과를 얻는다

 

  • 최상위 속성이 ref() 경우 자동 unwrapping 진행 = 최상위 속성이 ref() 경우 .value는 사용할 필요 없다.
  • 최종 평가 값이 ref() 경우 {{}}에 의해 자동 unwrapping(출력을 위함) 진행
  • Array, Set, Map과 같은 참조형 객체 요소는 자동으로 unwrapping이 진행되지 않는다. 예를들어 객체 순회를 할 때 ref객체로 순회할지 내부 참조 데이터를 순회해야할지 모호하기 때문.

unwarpping이 진행 되었다면 3번째 obj.count[0] + 1 이 1이 나와야하지만 [object Object]1이 출력된 모습

가볍게 Vue에 대해 알아보는 시간이었는데, 다음시간만 되어도 바로 문법들이 와다다 튀어나올 예정이다. 또.. 공부해야겠지?

728x90