[REACT] Input 태그의 value, defaultValue에 대해서

문제 : 리액트로 프로젝트를 진행하면서 INPUT태그의 Onchange함수를 이용해서 변경되는 값을 State로 관리하려고 하였는데 의도와는 다르게 Onchange가 정상적으로 작동하지 않는 모습을 보였다.

원인 : 기존 작성된 코드의 INPUT태그에 value가 아닌 defaultValue를 사용하고 있었고 defaultValue는 다르게 작동을 했기에 OnChange가 정상 작동 하지 않았다.

<input type="text" defaultValue="Initial Value" />

value와 defaultValue는 어떤 차이가 있을까?

value는 input요소의 현재 값을 설정하고 유지하는 데 사용된다. 리액트 컴포넌트의 상태나 프로퍼티에 바인딩하여 동적으로 값을 변경하고 유지할 수 있다.

import React, { useState } from 'react';

function InputComponent() {
  const [inputValue, setInputValue] = useState('Initial Value');

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

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

export default InputComponent;

다음과 같이 input 태그를 사용해서 사용자가 입력값을 변경하면, 리액트 컴포넌트가 이를 감지하여 컴포넌트의 상태를 업데이트하고 화면을 다시 랜더링하게 된다.


defaultValue는 value와는 조금 다른 목적으로 정적인 초기에 설정된 값에 사용한다.

import React from 'react';

function InputComponent() {
  return (
    <input
      type="text"
      defaultValue="Initial Value"
    />
  );
}

export default InputComponent;

다음과 같이 defaultValue는 input요소의 초기 값으로 사용되지만, 한 번 랜더링되고 나면 리액트는 이후에 해당 값을 변경하지 않는다.

value와 defaultValue는 언제 사용할까?

value는 사용자 입력 값을 리액트 컴포넌트의 상태와 연결하는 제어 컴포넌트에서 주로 사용되고
defalutValue는 컴포넌트 상태를 업데이트 할 필요가 없는 기본값 설정, 입력 값을 리액트 상태로 관리하지 않는 비제어 컴포넌트에 사용된다.

결론

무조건적으로 value를 사용하기 보다 컴포넌트의 상황과 기능을 고려하여 적절한 속성을 선택하는 것이 중요하다.!