[Vue] Props 단방향 데이터 흐름

[Vue] Props 단방향 데이터 흐름

Props를 사용하는데 궁금한 점이 생겼다. 바로 내려받은 데이터를 자식에서 바꿔도 되느냐의 의문점이다.

공식문서의 개념을 자세히 보면,

모든 prop들은 부모와 자식 사이에 단방향으로 내려가는 바인딩 형태를 취한다.

부모의 속성이 변경되면 자식 속성에게 전달되지만, 반대 방향으로 전달되지 않는다.

또한, 부모 컴포넌트가 업데이트 될 때 마다 자식 요소의 모든 prop들이 최신 값으로 새로고침 된다.

이 말의 뜻은 사용자가 prop을 자식 컴포넌트 안에서 수정해서는 안된다는 뜻이다.

정리

1. prop은 초기값만 전달하고, 자식 컴포넌트는 그 초기값을 로컬 데이터 속성으로 활용하고 싶은 경우

: 해당 경우에는 로컬 데이터 속성을 따로 선언하고 그 속성의 초기 값으로써 prop을 사용하는 것이 가장 바람직하다.

props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }

2. 전달된 prop의 형태를 바꿔야하는 경우

: 해당 경우에는 computed 속성을 사용하는 것이 바람직하다.

props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }

출처

https://kr.vuejs.org/v2/guide/components-props.html

from http://moretz0921.tistory.com/385 by ccl(A) rewrite - 2021-12-27 17:27:24