[react] Using key with defaultValue

리액트에서 일반적으로는 input에 value와 onChange를 줘서 값을 설정한다. 혹은 input의 initial value을 정하고 싶을 때는 defaultValue를 사용한다.

defaultValue only gets set on initial load. After that, it won't get "naturally" updated because the intent was only to set an initial default value.

Problem

나의 경우, 부모 컴포넌트에서 useSelector를 통해서 받은 값을 자식 컴포넌트에게 props를 통해서 넘겨준 뒤, 자식 컴포넌트의 input의 이니셜 값으로 설정을 해야했다. 이 때 자식 컴포넌트의 input값을 defaultValue로 설정했더니, 값이 바뀔 때 제대로 업데이트 되지 않아서 검색을 하던중, 이러한 경우 key를 사용할 수 있다는 것을 알았다.

이렇게 하면, defaultValue를 사용하면서 동시에 input의 값을 업데이트 할 수 있다. ✨

How to solve

LabelList.js

function LabelList() {
  const labels = useSelector((state) => state.notes.labels);

  return (
    <div>
      {labels.map((label, i) => <LabelItem key={i} label={label} />)}
    </div>
  )
}

LabelItem.js

function LabelItem({ label }) {
  const [enteredLabel, setEnteredLabel] = useState('');
  
  const handleChange = e => setEnteredLabel(e.target.value);
  
  return (
    <div>
      <EditLabelInput
      type="text"
      key={label.id} // (*)
      defaultValue={label.name} // (*)
      onChange={handleChange}
       />  
    </div>
  )
}