웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
Vue2 플러그인 composition API에서 forceUpdate() 동작 안하는 이슈
Last Modified : 2023-10-15 / Created : 2023-10-12Vue2에서 Vue3를 사용하지 않고 Vue의 핵심 기능인 composition-api를 사용하는 경우가 많습니다. 이런 이유는 다양한 데(플러그인 지원 여부나 안정성 등등) 여기서는 this.forceUpdate()가 동작하지 않는 경우의 방법에 대하여 알아봅니다.
우선 원인은 composition api가 Vue3의 reactivity를 온전히 기능적으로 다하지 못해서 발생하는 문제입니다. 즉 이런 이유로 렌더링 관련 이슈가 발생한 경우 this.$forceUpdate()를 실행해도 해당 이슈가 해결되지 않을 수 있습니다.
가장 간단한 해결 방법으로는 렌더링이 필요한 데이터를 업데이트 할 때 $set()을 사용하는 방법입니다. 이처럼 $set은 렌더링을 위한 객체의 반응성 이슈를 수정할 때 사용 가능한 가장 쉽고 간단한 방법입니다.
// $set : 반응성을 가지는 객체를 추적하여 뷰에 업데이트, 렌더링 수행
먼저 간단한 문법입니다.
$set(대상 객체, 객체 키, 객체 값)
간단하게 $forceUpdate()를 사용하지 않고 아래와 같이 objA에 $set을 사용하면 렌더링 되지 않던 이슈가 해결될 수 있습니다. $set은 context의 root에서 접근 가능합니다.
아래는 간단한 예제코드 입니다. Composition API에서 $set()을 사용한 방법입니다.
위의 예제를 사용하면 objA 객체의 name의 값이 'abc'로 업데이트 후 렌더링되어 바로 나타나게 될 것입니다. 간단한 렌더링 이슈 해결 방법이었습니다.
이 외에도 $set을 사용하여 객체에 새로운 프로퍼티를 추가할 수 있습니다.
아래 예제는 Vue의 data가 가지는 objB에 새로운 프로퍼티 newMessage를 추가하는 간단한 예제입니다.
위 예제를 보면 addProperty() 메서드를 가지고 있습니다. 이 메소드를 실행할 경우 새로운 키와 값이 objB에 추가될 것입니다.
여기까지 렌더링 이슈 해결방법과 간단한 $set 사용 예제를 알아봤습니다.
this.forceUpdate() 동작하지 않는 이유
우선 원인은 composition api가 Vue3의 reactivity를 온전히 기능적으로 다하지 못해서 발생하는 문제입니다. 즉 이런 이유로 렌더링 관련 이슈가 발생한 경우 this.$forceUpdate()를 실행해도 해당 이슈가 해결되지 않을 수 있습니다.
composition API에서 $set을 사용하여 렌더링 이슈 해결하기
가장 간단한 해결 방법으로는 렌더링이 필요한 데이터를 업데이트 할 때 $set()을 사용하는 방법입니다. 이처럼 $set은 렌더링을 위한 객체의 반응성 이슈를 수정할 때 사용 가능한 가장 쉽고 간단한 방법입니다.
// $set : 반응성을 가지는 객체를 추적하여 뷰에 업데이트, 렌더링 수행
먼저 간단한 문법입니다.
$set(대상 객체, 객체 키, 객체 값)
간단하게 $forceUpdate()를 사용하지 않고 아래와 같이 objA에 $set을 사용하면 렌더링 되지 않던 이슈가 해결될 수 있습니다. $set은 context의 root에서 접근 가능합니다.
$set 사용 예제보기
아래는 간단한 예제코드 입니다. Composition API에서 $set()을 사용한 방법입니다.
setup(emit, { root }) {
...
const updateData = () => {
root.$set(objA, 'name', 'abc')
}
}
...
const updateData = () => {
root.$set(objA, 'name', 'abc')
}
}
위의 예제를 사용하면 objA 객체의 name의 값이 'abc'로 업데이트 후 렌더링되어 바로 나타나게 될 것입니다. 간단한 렌더링 이슈 해결 방법이었습니다.
이 외에도 $set을 사용하여 객체에 새로운 프로퍼티를 추가할 수 있습니다.
객체에 신규 프로퍼티 추가하기, $set
아래 예제는 Vue의 data가 가지는 objB에 새로운 프로퍼티 newMessage를 추가하는 간단한 예제입니다.
export default {
data() {
return {
objA: {
message: 'Hello Vue!'
}
};
},
methods: {
addProperty() {
this.$set(this.objA, 'newMessage', 'Hello OpenAI!');
}
}
};
data() {
return {
objA: {
message: 'Hello Vue!'
}
};
},
methods: {
addProperty() {
this.$set(this.objA, 'newMessage', 'Hello OpenAI!');
}
}
};
위 예제를 보면 addProperty() 메서드를 가지고 있습니다. 이 메소드를 실행할 경우 새로운 키와 값이 objB에 추가될 것입니다.
여기까지 렌더링 이슈 해결방법과 간단한 $set 사용 예제를 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
