JavaScript DOMの処理

1

const root = document.querySelector('#root);
const plustBtn = document.querySelector('#plusBtn');

let i = 0;

root.innerHTML = "<p>init : 0</p>";

plusBtn.addEventListener('click', () => {
  root.innerHTML = `<p>init : ${++i}</p>`;
});

2

const component = {
  message: 'init',
  count: 0,
  render(){
    return `<p>${this.message} : ${this.count}</p>`;
  }
};

function render(rootElement, component) {
  rootElement.innerHTML = component.render();
}

// 초기화
render(document.querySelector('#root'), component);

document.querySelector('#plusBtn).addEventListener('click', () => {
  component.message = 'update';
  component.count = component.count + 1;
});

JavaScriptでのDOM処理は直接DOMにアクセスすることで行われる.
そのため、リスク負担も大きい(?)(人を間違えると何になるか…)
1番と2番は同じ結果を画面に表示します.
1番コードは簡潔に見えますが、直感的ではありません.
逆に、2番コードは直感的ですが、不完全です.
2番コードは、データを構成部品と呼ばれるオブジェクトに含めます.
このオブジェクトは、データストアとしての属性を有し、画面に表示できるrenderと呼ばれる方法を有する.
このオブジェクトのデータ値は、レンダー(Render)と呼ばれる方法で変更できます.
これらの値を変更するには、画面で再レンダリングする必要があります.

純応答DOM処理

const Component = props => {
/*리액트의 엘리먼트*/
  // 가상 돔을 가지고 있다가 실제 돔으로 반영해주는 역할
  return React.createElement('p', null, `${props.message} : ${props.count}`);
  // <p>message : count</p>
}

ReactDOM.render(/*리액트 컴포넌트*/
  React.createElement(Component, {message: 'init', count: 0}, null)
  , document.qerySelector('#root'));

document.querySelector('#plusBtn').addEventListener('click', () => {
  React.createElement(
    Component,
    { message: 'update', count: 10 },
    null
  ),
  document.querySelector("#root")
})

以下に、JSXの応答なしにDOMを処理するコードを示す.
前のjavascriptコードと似ていて、ちょっと大変な感じがします.
JSXが使用しているreactから消えた場合は、次のコードを記述する必要があります.
このようにプログラムを開発すると、困ります.

JSX処理によるレスポンスDOM

私たちがreactでJSXを使えるのは、バーベルというコンパイラがあるからです.
下図に示すように、バーベルはreact、Javascript、JSXを使用したコードを純応答コードに変換します.
忠誠を尽くす.パウエル!
JSXは、純reactやJavaScriptでは使用できないHTMLタグの使用を提供しています.
これにより、複雑なHTMLコードの代わりに、Webページをコンポーネント単位で分割できます.