[React] input요소에 value와 defaultValue의 차이점

https://reactjs-kr.firebaseapp.com/docs/uncontrolled-components.html
https://blog.logrocket.com/controlled-vs-uncontrolled-components-in-react/
https://bobbyhadz.com/blog/react-set-default-value-of-input

uncontrolled Component VS controlled Component

리액트에서 form의 value를 관리하기 위한 두 가지 방식이 있다.

1. controlled Component - react의 state와 통합된 폼 컨트롤

• React의 상태(state)와 통합된 폼 컨트롤 방식이다.
• state 값을 사용하여 값(value)을 관리하고, 이벤트 핸들러를 통해 상태를 변경하게 된다.
• 모든 값은 React에 의해 제어되며, 실시간 상태 관리가 가능하다.
  <input value={state} onClick={()=>{}} />

2. uncontrolled Component - useRef를 이용하여 DOM을 다루는 방식

• React의 상태와 통합하지 않고, useRef를 사용하여 DOM을 직접 제어하는 방식이다.
• 초기값은 defaultValue로 초기값만 설정하고, 값 변경은 DOM에 직접 접근하여 처리한다.
  <input ref={ref} defaultValue="default value" />
  

controlled Component , uncontrolled Component 예제 코드

function App() {
  // Controlled Component 상태 관리
  const [firstName, setFirstName] = useState('Default value');

  // Uncontrolled Component 참조
  const ref = useRef(null);

  const handleClick = () => {
    console.log(ref.current.value);
  };

  return (
    <div>
      {/* 👇️ Controlled Component */}
      <input
        type="text"
        value={firstName}  
        onChange={event => setFirstName(event.target.value)} 
      />
      <p>Controlled Value: {firstName}</p>

      {/* 👇️ Uncontrolled Component */}
      <input
        type="text"
        ref={ref}  
        defaultValue="My default value"  
      />
      <button onClick={handleClick}>Log Uncontrolled Value</button>
    </div>
  );
}

export default App;