[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

• controlled Component : react의 state와 통합된 폼 컨트롤
• uncontrolled Component : 통합하지 않고 useRef를 이용하여 DOM을 다루는 방식

---

form의 value를 처리하기 위해 두 가지 방식이 있다.

1. state값을 사용하고 handler를 통해 변경해주는 법 (controlled Component)
   <input value={state} onClick={()=>{}} />

2. 컴포넌트 안에 DOM handler를 사용하는 법 (uncontrolled Component)
   <input ref={ref} defaultValue="default value" />

👉 차이

controlled Component를 사용하면 React에 의해 처리되지만,
uncontrolled Component를 사용하면 Dom자체에 의해 처리됨.

---

input요소에 value와 defaultValue 중 뭘 써야 하나?

1. controlled Component 방식일 땐 - value 사용

• 대부분 폼 요소에는 controlled Component 방식 사용 권장함
• value값이 state고 handler를 통해 값 수정하는 방식으로
  <input value={state} onClick={onClick} />

2. uncontrolled Component 방식일 땐 - defaultValue 사용

• uncontrolled Component 방식에서는 DOM이 form data를 처리 하기 때문에 value를 사용해도 값을 바꿀 수가 없다.
• 그래서 defaultValue를 사용하여 ref.current.value로 값을 제어하게 됨.

---

controlled Component , uncontrolled Component 예제 코드

function App() {
  const [firstName, setFirstName] = useState('Default value');

  const ref = useRef(null);

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

  return (
    <div>
      {/* 👇️ for a controlled input field */}
      <input
        value={firstName}
        onChange={event => setFirstName(event.target.value)}
      />

      {/* 👇️ for a controlled input field */}
      <input ref={ref} defaultValue="My default value" />
      <button onClick={handleClick}>Click</button>
    </div>
  );
}