Vue에서의 단방향 데이터 흐름
모든 props는 자식 속성과 부모 사이에 단방향 바인딩을 형성합니다: 부모 속성이 업데이트되면 자식으로 전달되지만, 그 반대는 아닙니다. 이는 자식 컴포넌트가 부모의 상태를 실수로 변경하는 것을 방지하여, 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 상황을 막아줍니다.
또한, 부모 컴포넌트가 업데이트될 때마다, 자식 컴포넌트의 모든 props는 최신 값으로 갱신됩니다. 이것은 자식 컴포넌트 내부에서 prop를 변경하려고 시도해서는 안 된다는 것을 의미합니다. 만약 그렇게 하면, Vue는 콘솔에 경고를 표시할 것입니다.
일반적으로 prop를 변경하고 싶은 유혹이 생기는 두 가지 경우가 있습니다. 이들을 살펴보겠습니다.
첫 번째 경우
prop는 초기값을 전달하는 데 사용됩니다; 자식 컴포넌트는 이후에 로컬 데이터 속성으로 사용하고 싶어 합니다. 이 경우, prop의 값을 초기값으로 사용하는 로컬 데이터 속성을 정의하는 것이 가장 좋습니다:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
두 번째 경우
prop는 변환이 필요한 원시 값으로 전달됩니다. 이 경우, prop를 사용하는 계산된 속성을 정의하는 것이 가장 좋습니다:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
참고 사항
JavaScript에서 객체와 배열은 참조에 의해 전달된다는 점에 유의하세요. 따라서 prop가 배열이나 객체인 경우, 자식 컴포넌트 내에서 해당 객체나 배열을 변경하면 부모의 상태에 영향을 미치게 되며, Vue는 이에 대해 경고할 수 없습니다. 단방향 데이터 바인딩을 무시하면 원치 않는 결과를 초래할 수 있으므로, 객체와 배열을 포함한 어떤 prop의 변형도 피해야 합니다.
