만들면서 학습하는 리액트(react):소개편 - 리액티브 - 015
소개편
리액티브
특정 값에 의존해 자동으로 반응하는 것을 리액티브(reactive) 하다 고 함
데이터가 변경될 때마다 엘리먼트에 자동으로 반영시키는 방법
const state = {
_data: "Hello world",
};
const render = () => (document.body.innerHTML = `<p>${state.data}</p>`); // 2-1, 3-3, 4-3
Object.defineProperty(state, 'data', {
get() {
console.log('get'); // 2-2, 3-4, 4-4
return state._data;
},
set(value) {
console.log('set'); // 3-1, 4-1
state._data = value;
render(); // 3-2, 4-2
}
}); // 1
render(); // 2
state.data = "안녕"; // 3
state.data = "Hello World"; // 4
// result
// get
// set
// get
// set
// get
- Object.definePropoerty : state 객체에 ‘data’라는 프로퍼티를 정의하고, state의 data 프로퍼티를
호출할 때(state.data)get() 함수를 호출하고, 프로퍼티에 값을할당할 때(state.data = "")set() 함수를 호출하게 함 - render() 함수를 호출
- render() 함수는 state.data 를 호출함
- state.data 가 호출 되면 get() 함수가 호출됨 // get
- state.data 에 “안녕” 을 할당함
- state.data 에 값을 할당하면 set() 함수가 호출됨 // set
- render() 함수를 호출
- render() 함수는 state.data 를 호출함
- state.data 가 호출 되면 get() 함수가 호출됨 // get
- state.data 에 “Hello World” 을 할당함
- state.data 에 값을 할당하면 set() 함수가 호출됨 // set
- render() 함수를 호출
- render() 함수는 state.data 를 호출함
- state.data 가 호출 되면 get() 함수가 호출됨 // get
데이터가 변경될 때 마다 render()가 자동으로 실행되게 변경함