음악, 삶, 개발
props 의 변경은 자동으로 re-render 하지않는다 : computed 필요 본문
Vue 의 모든 컴포넌트의 re-rendering은 props 가 아닌 state 가 변경되었을때 일어난다.
props 는 결국 사용자가 넘기는 값들일 뿐이고, 결국 state 가 이 props 를 받아 원하는 방식으로 사용하는것이다.
사용자가 런타임상태에서 props 를 변경했을때, 리랜더링이 발생하게할려면,
computed() 를 반드시 사용해야한다.
그래야면 변한 props 가 state 를 다시 변경하게되고, 결과적으로 리랜더링시켜주는것이다.
만약 처음 웹페이지가 열리고 나서, 절대 리랜더링하지않을 컴포넌트라면 computed 가 필요하지않다.
<template>
<div>{{ state.isActive }}</div>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
props : {
isActive : { type : Boolean, default : false }
},
setup(props) {
const state = reactive({
isActive : computed(() => props.isActive) // 반드시 computed!!
})
return { state }
}
}
</script>