마트철수

[017] composition api + 함수 이해하기 본문

KB IT's Your Life/교육

[017] composition api + 함수 이해하기

마트스 2024. 5. 30. 17:55

 
2024.05.30(목)
 
Vue.js 6일차

 
이벤트 핸들러는 즉각적인 처리
Computed 프로퍼티는 데이터가 변경되면, 자동으로 다시 계산
 
 

 
원쌤의 Vue.js 퀵스타트
 

  • CH01 Vue.js 소개
  • CH02 Vue.js를 위한 ES6
  • CH03 Vue.js 기초와 Template
  • CH04 Vue 인스턴스
  • CH05 이벤트 처리
  • CH06 스타일 적용
  • CH07 단일 파일 컴포넌트를 이용한 Vue 애플리케이션 개발
  • CH08 컴포넌트 심화
  • CH09 Composition API
  • CH10 vue-router를 이용한 라우팅
  • CH11 axios를 이용한 HTTP 통신
  • CH12 vue-router와 axios를 사용한 예제
  • CH13 pinia를 이용한 상태 관리

 

 

CH09 Composition API

 
 
9.2 Compositon API란?
Vue3에서 새롭게 추가된 기능
컴포넌트 로직을 효과적으로 재구성한 함수 기반의 API
 
왜 사용하는가?
Option Ai는 관련된 속성끼리 묶여있지 않고 코드가 분리되어있어서
매번 찾아야하는 불편함이 있기 때문
 
 
9.3 setup 메서드를 이용한 초기화
모든 초기화작업을 setup() 담당하게 됨
data, methods, computed 옵션이  사라짐
우리가 호출X -> created 단계에서 자동 호출
 
옵션이 모두 함수화됨 (괄호 붙여야 함)
context가 this의 역할을 함
 
9.3 반응성을 가진 상태 데이터
 
ref()
: 기본 타입의 값을 이용해 반응성을 가진 참조형 데이터 생성 (기본형/참조형)
 
 
 
 

함수

 
함수 고급 (p 21)
 
내부 함수:
프로그램 개발 시 일어나는 네임 충동을 막는 방법 (덮어쓰는 방법)
ex) 밤을 설명하시오. 에 대한 여러 답변
 
○ nestfunction3.html
<body>
 <scipt>
... c = 100;
 어느 함수에도 속하지 않은 c는 전역함수가 됨
 
Stack: 쌓다
스택에 무언갈 넣는것: push
스택에 무언갈 빼는것: pop
=> LILO(Last In, First Out) ... 나중에 들어간 것이 처음 나옴
 
함수를 리턴하는 함수
(넘어가서 p.32)
var fn = outer(); ... 리턴값에 함수가 있을 때 클로저 생성됨
 
클로저
지역 변수의 유효 범위
 
호출된 scope이 사라지지(garbage) 않게 하려면?
그 참조하는 값을 유지하면 됨
 

 
 
○src/components/Calc2.vue
내부 함수 내에서 바깥 함수의 지역 변수를 쓰고 있다
그리고 그 값이 반드시 return 되어야함
그래야 그 scope에 대한 함수가 유지됨
 
reactive()
: 배열, 객체 등 참조형에 대한 반응성을 가지도록 함
 
객체를 통째로 바꾸고 싶을떈, reference 함수 사용
 
const:
변수 선언하면, 상수가 되어 값을 변경할 수 없음
객체의 속성, 배열의 요소를 변경하는 것은 가능!
obj, arr 자체에 새로운 객체나 배열 할당은 불가능!
 
 
9.4 computed()
반응형 데이터가 반드시 있어야함
ex) return state.x + state.y;
 
9.5 watch와 watchEffect
 
watch()
: 비동기 함수를 호출했을 때, script에서 값이 수정됨
 
watchEffect
: Vue3에서 바능성 데이터 의존성을 추적하는 기능을 제공하는 새로운 방법?
 
 
9.8 <script setup> 사용하기
단일 파일 컴포넌트 내부에서 Composiion API를 좀 더 편리한 문법적 작성 기능 제공
- 간결한 코드 사용 가능
- import하면 바로 자식으로 등록되어 지역 컴포넌트 등록됨 (components 속성 필요 없음)
 
TodoList App 리팩토링
 

실습

 
▼ ScopedSlotTest.vue

<template>
  <div>
    <h3>당신이 경험한 프론트 엔드 기술은? (네번째 : ScopedSlot)</h3>
    <CheckBoxList :items="items" @check-changed="CheckBoxChanged">
      <template v-slot:icon="p1">
        <i v-if="p1.checked" class="far fa-grin-beam"></i>
        <i v-else class="far fa-frown"></i>
      </template>
      <template v-slot:default="p2">
        <span v-if="p2.checked" style="color: blue; text-decoration: underline"
          ><i>{{ p2.label }}</i></span
        >
        <span v-else style="color: gray">{{ p2.label }}</span></template
      >
    </CheckBoxList>
  </div>
</template>

<script>
import CheckBoxList from './CheckBoxList.vue';

export default {
  name: 'ScopedSlotTest',
  components: { CheckBoxList },
  data() {
    return {
      items: [
        { id: 'V', checked: true, label: 'Vue' },
        { id: 'A', checked: false, label: 'Angular' },
        { id: 'R', checked: false, label: 'React' },
        { id: 'S', checked: false, label: 'Svelte' },
      ],
    };
  },
  // 변경된 체크박스의 id로 현재 items 배열에서 해당 요소를 찾는다.
  methods: {
    CheckBoxChanged(e) {
      let item = this.items.find((item) => item.id === e.id);
      // 해당 아이템의 checked 값을 받아온 값으로 변경
      item.checked = e.checked;
    },
  },
};
</script>

<style>
</style>

 
▼ CheckBoxList.vue

<template>
  <div v-for="item in items" :key="item.id">
    <slot name="icon" :checked="item.checked"></slot>
    <input
      type="checkbox"
      :value="item.id"
      :checked="item.checked"
      @change="
        $emit('check-changed', { id: item.id, checked: $event.target.checked })
      "
    />
    <slot :checked="item.checked" :label="item.label"></slot>
  </div>
</template>

<script>
export default {
  name: 'CheckBoxList',
  props: ['items'],
};
</script>

 
▼ App2.vue

<template>
  <div>
    <ScopedSlotTest />
  </div>
</template>

<script>
import ScopedSlotTest from './components/ScopedSlotTest.vue';
export default {
  name: 'App2',
  components: { ScopedSlotTest },
};
</script>

 
 

'KB IT's Your Life > 교육' 카테고리의 다른 글

[019] axios를 이용한 HTTP 통신  (0) 2024.06.03
[018] Vue-router 그리고 script setup  (0) 2024.05.31
[016] Vue.js 컴포넌트 심화 슬롯  (3) 2024.05.29
[015] Vue.js 단일 파일 컴포넌트  (0) 2024.05.28
[014] Vue.js Todolist 만들기  (0) 2024.05.27
'KB IT's Your Life/교육' Related Articles more