카테고리 없음

setup()에서 props 접근시 주의 점

dev_0hoon 2025. 1. 25. 09:18
        setup(props, context) {
            function remove(item,index) {
                localStorage.removeItem(item);
                context.emit('remove',index);
            }

            props.todoItems
            props.userId
            return {remove}
        }
        
        위처럼 코드를 생각하면
        
        setup({todoItems, userId}, context) {
            function remove(item,index) {
                localStorage.removeItem(item);
                context.emit('remove',index);
            }

            props.todoItems
            props.userId
            return {remove}
        }

아래처럼 props를 디스트럭쳐링을 하면 안된다. 디스트럭쳐링을 하는 순간, vue의 반응성(reactivity)가 사라지게 된다. 그래서 props는 있는 그대로 사용해야한다.

 

만약 디스트럭쳐링을 하면, props의 값이 바뀌어도 해당 함수의 값은 변하지 않게 된다!