// 소스코드 입니다.
const store = new Store();
function App() {
const root = document.createElement('main');
root.appendChild(Index());
root.appendChild(Sub());
return root;
}
function Index() {
const root = document.createElement('div');
root.style.background = 'cyan';
const renderIndex = () => {
const [Test, setTest] = store.useState({ test: 'a' });
const [Test2, setTest2] = store.useState({ test2: 'b' });
root.innerText = `${Test} : ${Test2}`;
console.log('인덱스가 렌더링 되었다.');
root.onclick = () => {
setTest('sss');
setTest2(Math.random());
};
};
store.watch(renderIndex);
return root;
}
function Sub() {
const root = document.createElement('div');
store.watch(() => {
const [Test2, setTest2] = store.useState('test2');
const [Test3, setTest3] = store.useState({ test3: 'c' });
root.innerText = `${Test3} : ${Test2}`;
console.log('서브가 렌더링 되었다.');
root.onclick = () => {
setTest3('공유 되지 않는 상태 변화');
};
});
return root;
}
render(document.querySelector('#app'), App());
function render(root, components) {
root.appendChild(components);
}