React 사용자 입력 다루기

form과 input을 다루는 기본적인 방법

사용자의 입력을 받은 다음에 그 입력 값에 대한 유효성을 검증하고 필요한 경우에 사용자에게 에러 메시지를 띄울 수 있다.

먼저 사용자 입력을 가져오는 방법은 크게 두 가지 방법이 있는데 모든 키 입력마다 확인하며 이 값들을 상태 변수에 저장할 수 있고 ref를 이용하여 사용자가 값을 모두 입력했을 때 입력 값을 가져올 수도 있다.

state를 이용하는 방법

import { useState } from "react";

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState("");
  const onChangeHandler = (event) => {
    setEnteredName(event.target.value);
  };

  const onSubmitHandler = (event) => {
    event.preventDefault();
    console.log(enteredName);
    setEnteredName("");
  };
  return (
    <form onSubmit={onSubmitHandler}>
      <div className="form-control">
        <label htmlFor="name">Your Name</label>
        <input
          onChange={onChangeHandler}
          type="text"
          id="name"
          value={enteredName}
        />
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

export default SimpleInput;

ref를 이용하는 방법

import { useRef } from "react";

const SimpleInput = (props) => {
  const nameInputRef = useRef();
  const onChangeHandler = (event) => {
    nameInputRef.current.value = event.target.value;
  };

  const onSubmitHandler = (event) => {
    event.preventDefault();
    const enteredName = nameInputRef.current.value;
    console.log(enteredName);
    nameInputRef.current.value = "";
  };
  return (
    <form onSubmit={onSubmitHandler}>
      <div className="form-control">
        <label htmlFor="name">Your Name</label>
        <input
          onChange={onChangeHandler}
          type="text"
          id="name"
          ref={nameInputRef}
        />
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

export default SimpleInput;

그렇다면 둘 중에 어떤 것을 사용할지가 문제인데 입력된 값으로 하고자 하는 일에 따라 다르다.

만일 이 값이 폼이 제출되었을 때 한번만 필요하다면 모든 키 입력마다 상태 값을 업데이트 하기엔

지나치고 불필요하므로 ref가 나을 것이다.

반면 즉각적인 유효성 검증을 위해 키 입력마다 입력 값이 필요하다면 ref로는 이 작업이 불가능 하므로 state를 사용하는 것이 좋다.

ref보다 state를 사용하는 것이 좋은 또 다른 경우는 입력된 값을 초기화 하고 싶은 경우이다.

state를 사용하면 setState를 통해서 state를 빈 문자열로 사용하고 input의 value값을 state로 연결해주면 state가 업데이트 된 후 반영된다.

setEnteredName("");

ref로 구현하는 것도 가능하지만 바람직하진 않다.

ref의 current에 접근하여 input의 value를 빈 문자열로 설정한다.

nameInputRef.current.value = "";