자식 component에서 handleCount 이벤트를 emit을 통해서 받고,
Number타입의 title과, String타입의 aaaa를 넘겨주는 컴포넌트를 만들었다.
자식 컴포넌트에서 만든 버튼을 클릭하면 부모 컴포넌트의 handleCount 이벤트가 작동하여 1씩 올라간다.
그러던 중 데이터가 부모 컴포넌트에서는 변하는데, 자식 컴포넌트에서는
props를 통해 받은 데이터 그대로임이 확인이 되었다.
여기서 props를 통해 데이터를 받은 후 자식 컴포넌트에서 가공시킨 후 부모컴포넌트로 데이터를 전달하는 방법도 하나의 방법이 될 수 있지 않을까? 생각하여, 그 방법에 대해 생각해 봤다.
처음에는 단순하게 props.title에 +1을 더하면 되지 않을까? 생각해서 했더니
다음과 같은 에러가 발생했다.
구글링을 통해 알아낸 원인은 부모뷰에서 v-bind로 전달한 데이터를 자식 뷰에서 props로 받고 그 값을 변경했을때 나타나는 에러이다.
단방향 데이터 흐름
모든 props 는 자식 속성과 부모 속성 간에 단방향 바인딩 을 형성합니다. 부모 속성이 업데이트되면 자식으로 흐르지만 그 반대는 아닙니다. 이렇게 하면 자식 구성 요소가 실수로 부모의 상태를 변경하여 앱의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.
또한 상위 구성 요소가 업데이트될 때마다 하위 구성 요소의 모든 props가 최신 값으로 새로 고쳐집니다. 즉 , 자식 구성 요소 내부의 prop을 변경 하지 않아야 합니다. 그렇게 하면 Vue가 콘솔에서 경고합니다.
일반적으로 prop을 변경하고 싶은 두 가지 경우가 있습니다.
prop은 초기 값을 전달하는 데 사용됩니다. 자식 구성 요소는 나중에 이를 로컬 데이터 속성으로 사용하려고 합니다. 이 경우 prop을 초기 값으로 사용하는 로컬 데이터 속성을 정의하는 것이 가장 좋습니다.
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}prop은 변환해야 하는 원시 값으로 전달됩니다. 이 경우 prop의 값을 사용하여 계산된 속성을 정의하는 것이 가장 좋습니다.
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}즉, 부모뷰에서 자식뷰로 전달한 데이터는 수정하지말고 따로 값을 변수화하여 사용한뒤 @emit을 이용해서 값을 동기화 시키는게 좋다.
자료를 더 찾는 중에 watch에 대한 키워드가 나왔는데, 이에 대해서 연구해본다면, 억지로 작동하는 방법을 찾을 순 있을 거 같다. 다음은 watch에 대해서 깊게 파보자.
