[React] input 한 글자 입력 시 focus out 되는 현상

⚡input focus out issue

---

📌 현상 재현

---

📌 원인

반복문으로 컴포넌트 생성할 때 귀찮아서 키 값을 uuid 생성 함수로 부여했더니

다음과 같은 현상이 발생했습니다.

1. input에 한 글자 입력하면 상태 변화로 인한 리랜더링
2. 리랜더링으로 인한 uuid v4() 함수 재실행으로 키 값 변경
3. 키 값 변경으로 인해 다른 요소로 인식해서 focus 유지 안됨

---

📌 해결

요소가 갖고 있는 고유의 값으로 key 값을 부여해

리랜더링이 일어나도 동일한 key를 유지할 수 있도록 했습니다.