TIL - Form Input - useRef vs useState

Form에서 input으로 입력을 받을 때 실시간으로 리렌더링되는 useState와 한 번에 모든 입력 값을 처리하는 useRef를 사용하는 경우 어떤 방법이 더 나은지와 이유를 학습했습니다.

useState vs useRef

useState

• 장점:
  1. React 상태 관리: 입력 값이 React 상태로 관리되므로, 입력 값이 변경될 때마다 컴포넌트가 리렌더링됩니다. 이를 통해 입력 값에 따라 즉각적으로 UI를 업데이트하거나 유효성 검사를 수행할 수 있습니다.
  2. 제어 컴포넌트: 제어 컴포넌트를 사용하면 입력 값의 변경을 쉽게 추적하고, 이를 기반으로 다양한 로직을 추가할 수 있습니다. 예를 들어, 입력 값에 따라 버튼을 활성화하거나 비활성화할 수 있습니다.
  3. 동기화: 입력 값과 상태가 항상 동기화되어 있기 때문에, 다른 상태와의 일관성을 유지할 수 있습니다.
• 단점:
  1. 성능: 입력 값이 변경될 때마다 컴포넌트가 리렌더링되므로, 입력 필드가 많은 경우 성능에 영향을 미칠 수 있습니다.
  2. 복잡성: 모든 입력 필드를 상태로 관리해야 하므로, 코드가 다소 복잡해질 수 있습니다.

useRef

• 장점:
  1. 간단한 구현: 입력 필드를 관리하기 위해 상태를 정의할 필요가 없으므로, 코드가 간단해질 수 있습니다.
  2. 성능: 입력 값이 변경될 때 컴포넌트가 리렌더링되지 않으므로, 성능이 향상될 수 있습니다.
• 단점:
  1. 비제어 컴포넌트: 입력 값이 React 상태로 관리되지 않기 때문에, 입력 값 변경 시 로직을 추가하거나 UI를 업데이트하는 것이 어렵습니다.
  2. 유효성 검사 어려움: 입력 값이 변경될 때 실시간으로 유효성 검사를 수행하기 어렵습니다.
  3. 동기화 문제: 입력 값과 상태가 동기화되지 않기 때문에, 다른 상태와의 일관성을 유지하기 어려울 수 있습니다.

결론

대부분의 경우, useState를 사용하여 제어 컴포넌트로 폼을 구현하는 것이 더 나은 방법입니다. 제어 컴포넌트를 사용하면 입력 값의 변경을 쉽게 추적하고, 이를 기반으로 다양한 로직을 추가할 수 있으며, 유효성 검사와 같은 작업도 쉽게 수행할 수 있습니다. 비제어 컴포넌트는 성능이나 단순성이 중요한 경우, 혹은 특정한 상황에서만 고려해볼 수 있습니다.

언제 useState를 사용해야 하는가?

• 입력 값에 따라 UI를 즉시 업데이트해야 할 때.
• 입력 값의 유효성 검사를 실시간으로 수행해야 할 때.
• 입력 값 변경에 따른 다양한 로직을 추가해야 할 때.
• 상태와 입력 값이 항상 동기화되어 있어야 할 때.

언제 useRef를 사용해야 하는가?

• 폼 제출 시 한 번에 모든 입력 값을 처리해야 할 때.
• 성능이 중요한 경우(예: 입력 필드가 매우 많을 때).
• 입력 값의 실시간 추적이나 유효성 검사가 필요 없는 간단한 폼일 때.
• 특정한 경우, 예를 들어 포커스를 제어해야 할 때.

예시 코드

useState 예시

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

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

useRef 예시

import React, { useRef } from 'react';

function MyForm() {
  const inputRef = useRef('');

  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

 

대체로, 입력 값을 상태로 관리하는 것이 더 직관적이고 강력한 기능을 제공하므로 useState를 사용하는 것이 더 일반적이고 추천되는 방법입니다.