JS의 반응성
May 01 2023
안녕! 이것은 나의 첫 번째 이야기이고 나는 그것에 대해 매우 흥분했습니다 :)). 이 이야기에서는 JavaScript의 간단한 반응성에 대해 논의하고 이를 구현하는 방법을 보여줍니다.
안녕! 이것은 나의 첫 번째 이야기이고 나는 그것에 대해 매우 흥분했습니다 :)).
이 이야기에서는 JavaScript의 간단한 반응성에 대해 논의하고 이를 구현하는 방법을 보여줍니다. React 와 Vue 는 모두 반응성을 활용하는 프레임워크의 예입니다. 반응성을 통해 데이터가 변경되면 자동으로 DOM이 업데이트됩니다.
먼저 반응성 구현의 간단한 예를 살펴보겠습니다.
<body>
<div id="counter-value"></div>
<button onclick="incr()"> incr </button>
<button onclick="decr()"> decr </button>
</body>
<script>
let counter = 0
const setCounterValueToDOM = () => {
document.querySelector('#counter-value').innerText = counter
}
setCounterValueToDOM()
const incr = () => {
counter += 1
setCounterValueToDOM()
}
const decr = () => {
counter -= 1;
setCounterValueToDOM()
}
</script>
그러나 이 접근 방식은 값이 업데이트될 때마다 함수를 호출해야 하므로 권장되지 않습니다 setCounterValueToDOM. 이는 나쁜 습관으로 간주됩니다.
JavaScript에서 처음부터 반응성을 구현하기 위해 Proxy 객체를 사용할 수 있습니다 . 생성자는 개체의 초기 값과 핸들러를 받습니다. 이 핸들러를 사용하면 개체에 발생하는 모든 변경 사항을 관찰할 수 있습니다. 코드의 스크립트 섹션을 다시 작성해 보겠습니다.
const counterHandler = {
set(obj, prop, value) {
obj[prop] = value
setCounterValueToDOM()
return obj
}
}
const counter = new Proxy(
{
value: 0,
},
counterHandler,
)
const setCounterValueToDOM = () => {
document.querySelector('#counter-value').innerText = counter.value
}
setCounterValueToDOM()
const incr = () => {
counter.value += 1
}
const decr = () => {
counter.value -= 1
}
즐기시기 바랍니다!
![연결된 목록이란 무엇입니까? [1 부]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
