인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

Huibeom Kim님의 프로필 이미지
Huibeom Kim

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

양방향 바인딩 (v-model)

부모,자식 컴포넌트 간 데이터 전달 시

작성

·

336

0

안녕하세요, 컴포넌트 간 데이터 전달 시, props 와 emit 을 이용한다고 말씀하셨습니다.

 

여기서 부모 컴포넌트에서 자식 컴포넌트로 반응형 데이터를 전달하게되면 자식 컴포넌트에서 그 반응형 데이터를 변경 시 같은 반응형 데이터를 참조하는 부모 컴포넌트도 값 바뀔텐데요, 이 때도 자식 컴포넌트에서 emit 을 정의하고 부모컴포넌트에서 해당 이벤트를 처리하게 해야할까요?

예를 들어 아래와 같은 식입니다.
부모 vue 에선,

<ChildView :childObj="refObj"></ChildView>

const refObj = ref({
  name: 'jack',
  deepObj: {
    deepName: 'kim'
  }
})

이렇게 refObj 반응형 변수를 생성하고 자식 props 로 넘기구요,

자식 vue 에선,

<p>{{ childObj.name }}</p>

const props = defineProps({
  childObj: Object
})

이런식으로 이용하는 방법입니다.

 

이렇게되면 childObj.name = '다른 이름'

과 같이 변경하면 부모 vue 의 refObj.value.name 도 같이 반응하게 되니까요. 이러면 emit과 이벤트 처리 코드를 따로 작성할 필요가 없어지겠구요.

 

이러한 방법으로 부모 자식간 데이터를 전달해도 될까요? 문제점이 있을까요?

 

답변 1

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요.

부모에서 자식컴포넌트로 넘긴 Props은 자식에서 말고 부모로 이벤트를 방출(emit)하여 부모에서 수정하는 것을 권장드립니다.

강의를 모두 수강하시면 강의에서도 해당 내용을 언급하고 있습니다.

Huibeom Kim님의 프로필 이미지
Huibeom Kim
질문자

네, 강의에서 그렇게 짚어주신 내용이 있어서 해당 질문을 드린 것인데요,
이 경우 문제점이 무엇일까요? 기능상 문제는 없으나, 데이터 변경에 대한 추적, 관리가 어려워서 emit 을 이용한 처리를 권장하시는 것일까요?

짐코딩님의 프로필 이미지
짐코딩
지식공유자

넵, 맞습니다~!

Huibeom Kim님의 프로필 이미지
Huibeom Kim

작성한 질문수

질문하기