(React) useState를 이용한 input 필드 입력받기, 한 글자만 입력 되는 이유

 

 

자바스크립트와 다른 react의 input

바닐라 자바스크립트로 <input> 요소의 value를 받아오고자 할 때 아래와 같은 순서를 거친다.

1. HTML input 태그로 <input> 요소를 생성한다.
2. 자바스크립트로 해당 <input> 요소 DOM을 받아온다. (querySelector, getElementById 등 사용)
3. 받아온 DOM의 value 값을 가져온다.

 

 

하지만 리액트를 사용해 위와 같이 접근하려고 하면 문제가 생긴다.

JSX로 <input> 요소를 생성해도 자바스크립트와 달리 한 글자만 입력되는 난감한 상황이 펼쳐지기 때문이다.

이는 리액트 특유의 렌더링 방식 때문에 생기는 현상이다.

 

<input> 요소에 value 속성을 설정하고 onChange 핸들러를 제공하지 않으면

입력값이 리액트 상태에 반영되지 않는다. 리액트는 이때 사용자 입력을 감지하고 컴포넌트를 재렌더링하는데,

이때 사용자가 초기 <input> 요소의 value 값을 빈 문자열("")로 지정해 두었다면,

재렌더링하면서 <input> 요소의 내부 value 값을 다시 빈 문자열("")로 설정한다.

 

 

 

<input> 요소에 한 글자만 출력되는 이유

그럼 왜 빈칸이 아닌 한 글자만 출력되는 것일까?

브라우저는 사용자가 입력할 때 입력한 값을 일시적으로 <input> 요소에 표시한다.

하지만 리액트가 value 속성을 통해 이 요소를 제어하고 있기 때문에, 리액트는 다시 빈 문자열을 렌더링 한다.

이 과정에서 리액트가 상태를 업데이트하기 전까지 브라우저는 사용자가 입력한 첫 글자를 표시한다.

따라서 사용자가 입력할 때마다 첫 글자가 일시적으로 보이지만, 곧바로 리액트에 의해 덮어씌워지는 것이다.

 

 

 

 

리액트에서 <input> 사용방법

따라서 리액트에서 input을 올바르게 사용하려면 onChange 핸들러를 제공하고, 

 

useState를 이용해 리액트가 상태 값을 올바르게 관리하도록 해야 한다.

 

import React, { useState } from 'react';

const MyForm = () => {
  const [inputValue, setInputValue] = useState(''); //input값을 관리할 state 생성

  const handleChange = (e) => {
    setInputValue(e.target.value); //value값 업데이트
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
};

export default MyForm;