39장 DOM -> HTML attribute vs Dom property in react

[hyunahOh]

리액트에서는 DOM을 어떻게 업데이트하는지 찍어봤습니다.

• 결론 : 콘솔에는 다음 사이클에 찍히긴 하지만 HTML 어트리뷰트 자체도 같이 업데이트 되는 것을 확인했습니다.

import { useState } from "react";
import "./App.css";

function App() {
  const [value, setValue] = useState("");

  const $inputElm = document.getElementById("input");

  /* HTML attributes */
  console.log("HTML attributes", $inputElm?.getAttribute("value"));
  /* DOM property */
  console.log("DOM property", $inputElm?.value);

  return (
    <div className="App">
      <input
        id="input"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
}