[TIL] 23.08.09 Today I Learned / vue v-on, computed, watch, components

요약: vue v-on, computed, watch, components

일시: 23.08.09

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

배운 점:

v-on

• HTML 요소에서 이벤트를 감지하고 해당 이벤트가 발생했을 때 Vue 인스턴스 내의 메서드나 표현식을 실행
• 사용자의 동작에 반응하여 동적으로 데이터를 변경하거나 상호작용
• v-on 디렉티브는 @ 기호를 이용하여 축약해서 사용 가능

<template>
  <div>
  	// == <button @click="handleClick">클릭하세요</button>
    <button v-on:click="handleClick">클릭하세요</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert("버튼이 클릭되었습니다!");
    }
  }
}
</script>

 

computed 

• 데이터의 계산된 값을 정의하는 데 사용되는 속성
• 데이터의 변화에 따라 자동으로 업데이트되며, 템플릿에서 마치 데이터 속성처럼 사용
• 계산된 값들을 보다 효율적으로 관리하고 재사용
• computed 속성을 정의하려면 Vue 컴포넌트의 computed 객체 내에 함수를 추가,  이 함수는 계산하려는 값들을 반환
• Vue.js에 의해 내부적으로 캐싱되므로, 계산 비용이 높은 계산이더라도 적절하게 캐싱하여 성능을 개선

<template>
  <div>
    <p>원의 반지름: {{ radius }}</p>
    <p>원의 넓이: {{ area }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radius: 5
    };
  },
  computed: {
    area() {
      return Math.PI * this.radius * this.radius;
    }
  }
};
</script>

 

watch 

• 데이터의 변화를 감시하고 변화가 감지되면 특정 동작을 수행하는 데 사용되는 옵션
• 주로 데이터의 변화에 대응하여 비동기적인 동작을 처리하거나 다른 데이터를 업데이트하는 데 활용
• watch 객체 내에는 감시하려는 데이터 속성 이름과 해당 속성이 변경될 때 실행되는 콜백 함수를 정의

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count(newCount, oldCount) {
      console.log(`카운트가 변경되었습니다. 이전 값: ${oldCount}, 새 값: ${newCount}`);
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

 

Component

• 부모 컴포넌트와 자식 컴포넌트 간의 관계를 구성하는 것은 애플리케이션의 모듈화와 재사용성을 증가시키는 중요한 개념
• 부모 컴포넌트는 하나 이상의 자식 컴포넌트를 가질 수 있음
• 부모 컴포넌트로부터 데이터를 전달받는 방법 중 하나로 props를 사용

부모 컴포넌트 (Parent Component)

• 다른 컴포넌트들을 포함하고 있는 상위 레벨의 컴포넌트
• 자식 컴포넌트를 인스턴스화하고 관리
• 데이터와 메서드를 자식 컴포넌트에 전달할 수 있으며, 자식 컴포넌트로부터 받은 데이터를 활용하여 화면을 구성

자식 컴포넌트 (Child Component)

부모 컴포넌트 내에서 선언되고 사용되는 하위 레벨의 컴포넌트

부모 컴포넌트로부터 전달받은 데이터를 사용하여 화면을 렌더링하거나 동작을 처리

독립적으로 동작하며, 부모 컴포넌트의 데이터를 직접 수정하지 않음

 

부모 컴포넌트

<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: "Hello from Parent!"
    };
  }
};
</script>

자식 컴포넌트

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

 

Next.js

Server Components VS Client Components

	Server Component	Client Component
데이터 가져오기	O	x
백엔드 데이터 접근	O	x
서버에 중요한 정보 유지 (access tokens, API keys, etc)	O	x
서버에 대한 큰 종속성 유지 / 클라이언트 측 자바스크립트 감소	O	x
상호작용 및 이벤트 리스너( onClick(), onChange()등) 추가	x	O
상태 및 수명 주기 효과 사용( useState(), useReducer(), useEffect(), 등)	x	O
브라우저 전용 API 사용	x	O
상태, 효과 또는 브라우저 전용 API에 의존하는 사용자 지정 Hook 사용	x	O
React 클래스 구성 요소 사용	x	O

 

2023.08.10 - [Database/MONGODB] - [MONGODB] MongoDB Atlas 가입 & 초기셋팅 방법

[MONGODB] MongoDB Atlas 가입 & 초기셋팅 방법

 

mongoDB 설치

npm install mongodb

 

2023.08.10 - [Database/MONGODB] - [MONGODB] Next.js에 mongoDB(몽고디비) 연결하기

[MONGODB] Next.js에 mongoDB(몽고디비) 연결하기

 

 

부족한 점: