[TIL] 23.08.10 Today I Learned

TIL/Today I Learned

[TIL] 23.08.10 Today I Learned

임성장 2023. 8. 10. 22:30

728x90

요약: vue 문법

일시: 23.08.10

장소: 더휴먼컴퓨터아트아카데미

배운 점:

vue

ref

Vue 컴포넌트 내에서 DOM 요소나 다른 값을 참조하기 위해 사용
ref를 사용하면 Vue 컴포넌트 내에서 해당 요소나 값에 접근하고 조작 가능

<template>
  <div>
    <button @click="increaseCounter">카운터 증가</button>
    <p>카운터: {{ counter }}</p>
    <input type="text" ref="textInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increaseCounter() {
      this.counter++;
      // ref를 통해 DOM 요소에 접근하여 포커스를 설정합니다.
      this.$refs.textInput.focus();
    },
  },
};
</script>

$emit

Vue 컴포넌트 내에서 사용자 정의 이벤트를 발생시키는 메서드
이를 통해 부모 컴포넌트와 자식 컴포넌트 간에 통신하거나 데이터를 전달 가능
발생한 이벤트는 부모 컴포넌트에서 v-on 또는 @ 디렉티브를 사용하여 감지하고 해당 이벤트가 발생했을 때 실행할 메서드를 지정 가능

// 자식 컴포넌트

<template>
  <button @click="sendMessage">메시지 보내기</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 'send-message' 이벤트를 발생시킵니다.
      this.$emit('send-message', '안녕하세요!');
    }
  }
};
</script>

this.$emit('send-message', '안녕하세요!')는 "send-message"라는 이벤트를 발생
이벤트 데이터로 '안녕하세요!' 문자열을 전달

// 부모 컴포넌트

<template>
  <div>
    <child-component @send-message="handleMessage"></child-component>
    <p>받은 메시지: {{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    };
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    }
  }
};
</script>

@send-message="handleMessage" 부분은 자식 컴포넌트에서 발생한 "send-message" 이벤트를 감지
해당 이벤트가 발생했을 때 handleMessage 메서드를 실행하도록 설정

export default 안에 들어가는 것들

export default 문은 Vue 컴포넌트를 정의하고 내보내는 데 사용
export default 내부에는 컴포넌트의 구조와 동작을 정의하는 여러 가지 속성과 옵션들이 포함

data

컴포넌트의 상태를 정의하는 데이터 객체
컴포넌트 내에서 사용되는 데이터들이 여기에 포함
함수 형태

props

부모 컴포넌트로부터 전달받은 속성을 정의하는 옵션
이를 통해 부모 컴포넌트와 데이터를 주고받을 수 있음
객체 형태

methods

컴포넌트의 메서드를 정의하는 객체
이벤트 처리나 기타 동작을 위한 메서드들이 여기에 포함
객체 형태

computed

계산된 속성을 정의하는 객체
기존 데이터를 기반으로 계산된 값을 제공
객체 형태

watch

데이터나 속성의 변화를 감지
이에 대응하는 동작을 정의하는 객체
객체 형태

created, mounted, updated, destroyed 등의 라이프사이클 훅

컴포넌트의 라이프사이클 이벤트에 대한 처리를 정의하는 메서드
함수 형태

components

해당 컴포넌트 내에서 사용할 하위 컴포넌트들을 등록하는 객체
객체 형태

propsData

테스트 목적으로 컴포넌트에 전달할 초기 props 데이터를 정의
객체 형태

slot

컴포넌트의 템플릿 내부에서 컨텐츠를 삽입하는 데 사용되는 기능
부모 컴포넌트에서 자식 컴포넌트의 템플릿을 확장하거나 커스터마이징할 때 유용하게 사용
자식 컴포넌트의 일부 또는 전체 템플릿을 부모 컴포넌트에서 결정하고 제어 가능
컴포넌트 재사용성을 높이고 동적인 컴포넌트 구성을 가능하게 함

// ChildComponent.vue

<template>
  <div class="child-component">
    <slot></slot>
  </div>
</template>

// ParentComponent.vue

<template>
  <div class="parent-component">
    <child-component>
      <p>부모 컴포넌트에서 추가된 컨텐츠</p>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
};
</script>

자식 컴포넌트의 <slot></slot> 부분은 부모 컴포넌트에서 삽입한 컨텐츠를 표시할 위치를 나타냄
부모 컴포넌트에서 <child-component> 태그 안에 있는 내용이 자식 컴포넌트의 slot을 통해 삽입됨

Provide와 Inject

Vue에서 컴포넌트 간에 데이터를 전달하고 공유하기 위한 고급 기능
부모 컴포넌트가 자식 컴포넌트에게 데이터를 제공하고, 자식 컴포넌트가 해당 데이터를 주입받아 사용할 수 있게 해줌
provide는 부모 컴포넌트에서 데이터를 제공하고, inject는 자식 컴포넌트에서 해당 데이터를 주입받아 사용하는 역할

// ParentComponent.vue

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  provide: {
    message: "부모로부터 전달된 메시지",
  },
};
</script>

// ChildComponent.vue

<template>
  <div>
    <p>부모로부터 받은 메시지: {{ parentMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ["message"],
  computed: {
    parentMessage() {
      return this.message;
    },
  },
};
</script>

부모 컴포넌트에서 provide 옵션을 사용하여 message 데이터를 제공
자식 컴포넌트에서는 inject 옵션을 사용하여 message 데이터를 주입받아 사용

Composition API

Vue 3에서 새롭게 도입된 기능 중 하나로, Vue 애플리케이션을 구성하고 관리하는 데 사용되는 기능의 집합
코드를 더 선언적이고 모듈화된 방식으로 작성할 수 있게 해주며, 코드의 재사용성과 가독성을 향상시키는 목적으로 만들어졌음
기존의 Options API와는 다르게 코드를 더 작은 함수로 분리하여 구성하고 이들 함수를 조합하여 컴포넌트를 만들어내는 방식

장점

코드 재사용성: 로직을 함수 단위로 분리하고 컴포넌트 간에 쉽게 공유 가능
가독성: 관련된 코드들이 함께 묶여 있기 때문에 코드의 의도를 이해하기 쉬움
코드 스케일링: 큰 규모의 애플리케이션에서도 코드를 보다 관리 가능한 단위로 분할하여 작성 가능

reactive

Vue 3의 Composition API에서 사용되는 함수로, 상태 데이터를 반응형으로 만들고 사용하는 데 도움을 주는 함수
반응형 데이터는 Vue가 해당 데이터의 변경을 감지하고 자동으로 화면을 업데이트할 수 있게 해줌
객체 또는 배열을 인자로 받아 반응형 데이터 객체를 반환

<script>
import { reactive } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: "안녕하세요!",
    });

    return {
      state,
    };
  },
};
</script>

toRefs

reactive로 만들어진 객체의 프로퍼티들을 개별적인 반응형 참조로 분리하여 반환
특히 반복문에서 반응형 데이터를 사용할 때, 객체의 프로퍼티들이 잘 동작하게 만들어줌

<template>
  <div>
    <p>{{ state.count }}</p>
    <p>{{ state.message }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: "안녕하세요!",
    });

    const increment = () => {
      state.count++;
    };

    // toRefs 함수를 사용하여 반응형 데이터의 프로퍼티를 참조로 변환
    return {
      ...toRefs(state),
      increment,
    };
  },
};
</script>

toRefs 함수를 사용하여 state 객체의 프로퍼티들을 개별적인 반응형 참조로 변환한 후, 컴포넌트 내에서 사용할 수 있게 반환

부족한 점:

리액트가 익숙해진지 얼마 되지 않아 vue를 배워서 그런지 아직 헷갈리게 많다. 우선은 리액트를 좀 더 깊게 공부한 뒤 vue가 필요해지면 그 때 제대로 공부해야 할 것 같다.

728x90