음악, 삶, 개발

props 의 변경은 자동으로 re-render 하지않는다 : computed 필요 본문

개발 Web/Vue.js 공부방

props 의 변경은 자동으로 re-render 하지않는다 : computed 필요

Lee_____ 2020. 12. 7. 06:19

 

Vue 의 모든 컴포넌트의 re-renderingprops 가 아닌 state 가 변경되었을때 일어난다.

props 는 결국 사용자가 넘기는 값들일 뿐이고, 결국 state 가 이 props 를 받아 원하는 방식으로 사용하는것이다.

사용자가 런타임상태에서 props 를 변경했을때, 리랜더링이 발생하게할려면,

computed() 를 반드시 사용해야한다.

그래야면 변한 propsstate 를 다시 변경하게되고, 결과적으로 리랜더링시켜주는것이다.

만약 처음 웹페이지가 열리고 나서, 절대 리랜더링하지않을 컴포넌트라면 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>