부모/자식 컴포넌트 확인하는 방법

Vue에서는 부모와 자식 관계가 컴포넌트 간의 import와 사용 방식으로 결정된다. 이 관계를 이해하려면 파일 구조와 코드에서 서로 어떤 컴포넌트가 포함하고 있는지를 확인해야 한다.

 

 

부모-자식 관계를 파악하는 방법

1. 부모 컴포넌트에서 자식 컴포넌트를 사용한 경우 찾기
   • 보통 부모 컴포넌트에서 자식 컴포넌트를 import한 다음 template에서 사용한다.
   • 만약 props와 emit이 사용된 코드라면:
     • 부모가 자식 컴포넌트에 데이터를 전달할 때 props 사용.
     • 자식이 부모에게 이벤트를 알릴 때 emit 사용.

---

구체적인 파일 탐색 방법

1. props를 사용하는 자식 컴포넌트 예시

• 예를 들어, 자식 컴포넌트가 아래와 같이 작성된 경우

<!-- ChildComponent.vue -->
<script lang="ts" setup>
const props = defineProps<{ search: AccountSearch }>()
const emit = defineEmits(['inquiry'])
</script>

<template>
  <button @click="emit('inquiry')">조회하기</button>
</template>

• props와 emit을 사용한 이 파일(ChildComponent.vue)은 자식 컴포넌트다.
• 여기서 search라는 데이터를 부모로부터 받는다.

2. 부모 컴포넌트에서 자식 컴포넌트 사용한 코드 찾기

• 부모 컴포넌트에서 자식 컴포넌트를 import하고 사용하는 것을 찾는다:

<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue'

const searchData = { /* search 데이터 */ }
</script>

<template>
  <ChildComponent :search="searchData" @inquiry="handleInquiry" />
</template>

이 경우:

• **ParentComponent.vue**가 부모 컴포넌트.
• **ChildComponent.vue**가 자식 컴포넌트.

---

부모와 자식 관계를 확인하는 파일 탐색 팁

1. import 구문을 찾기:
   • 각 파일에서 다른 컴포넌트를 import하고 있는지 확인한다.
   • import ChildComponent from './ChildComponent.vue' 같은 구문이 있는 파일이 부모다.
2. template에서 사용된 컴포넌트 태그 찾기:
   • 부모 컴포넌트에서는 자식을 <ChildComponent /> 형태로 사용한다.
   • 자식 컴포넌트에는 해당 태그가 없고 대신 **props와 emit**을 사용한다.
3. 프로젝트 구조와 이름을 확인:
   • 파일 구조상 **App.vue**나 Page.vue는 부모일 가능성이 높고, 컴포넌트 폴더 아래에 있는 파일들은 자식일 가능성이 크다.

---

정리

• 자식 컴포넌트는 props를 사용해 부모로부터 데이터를 받는다.
• 부모 컴포넌트는 emit을 통해 자식이 보내는 이벤트를 감지한다.
• import 경로와 template에서의 사용을 확인하면 부모-자식 관계를 쉽게 파악할 수 있다.