🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

24.05.20 18:53 작성 조회수 89

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)하여 부모에서 수정하는 것을 권장드립니다.

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

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

넵, 맞습니다~!

채널톡 아이콘