import React, { createRef, useState } from "react";
import { useRef } from "react";

const UseRefComponent = (props) => {
  const [value, setValue] = useState("");
// createRef 는 rerendering 시마다 새롭게 참조한다.
  const inputCreateRef = createRef();
// useRef 는 rerendering 시에도 참조를 유지해 준다. 최초에만 undefined로 나온다.
  const inputUseRef = useRef();

  console.log(inputCreateRef.current, inputUseRef.current);

  return (
    <div>
      <input type="text" value={value} onChange={change} />
      <input type="text" ref={inputCreateRef} />
      <input type="text" ref={inputUseRef} />
    </div>
  );

  function change(e) {
    setValue(e.target.value);
  }
};

export default UseRefComponent;