React의 input 값을 vanilla javascript로 변경하기

최근에 react로 되어 있는 웹페이지를 chrome extension으로 이벤트를 처리할 일이 생겼다. chrome extension은 react가 아닌 pure javascript 코드로 되어 있다. 그래서 pure javascript로 react의 input에 값을 세팅하고 이벤트를 발생시키는 방법을 찾다가 정리하게 된 글이다.

예를 들어 다음과 같은 React form이 있다고 하자.

소스코드는 아래와 같이 간단하게 구성할 수 있다.

export default function Login() {
  const [email, setEmail] = useState("");

  function handleEmailChange(event) {
    console.log("email change");
    setEmail(event.target.value);
  }

  return (
    <form>
      <div className="control">
        <label>Email</label>
        <input type="email" onChange={handleEmailChange} value={email} />
      </div>
      <p>
        <button type="submit">Submit</button>
      </p>
    </form>
  );
}

이 상황에서 vanilla javascript로 처리 해보자. 예를 들면 아래와 같은 코드로 email의 value에 값을 넣어보자.

document.querySelector('input').value = 'test@test.com';

그러면 email에 값은 세팅이 된다.

하지만 react 코드의 onChange 이벤트는 발생하지 않는다 (로그가 찍히지 않음). 즉 handleEmailChange 메소드가 호출되지 않으니 setEmail이 호출되지 않는다는 뜻이다. 즉 react에서 관리하는 email은 여전이 아무 값도 없다는 뜻이다. 그래서 이런 방식으로는 하면 안된다.

정상적으로 동작하려면 아래와 같은 방법으로 해야 한다.

function setInputValue(element, value) {
  const lastValue = element.value;
  element.value = value;
  const event = new Event("input", { target: element, bubbles: true });
  let tracker = element._valueTracker;
  if (tracker) {
    tracker.setValue(lastValue);
  }
  element.dispatchEvent(event);
}

호출할 때는 아래와 같은 방법대로...

setInputValue(document.querySelector('input'), 'test@test.com')

이렇게 수정하고 나면 값도 잘 세팅이 되고 react의 onChange 이벤트도 잘 발생하는 것을 확인할 수 있다.

참고

https://chuckconway.com/changing-a-react-input-value-from-vanilla-javascript/