[React][Typescript] Dialog 기능 이용할 때 깜빡임 발생 해결

• 이메일 회원가입 기능 개발 중 dialog를 이용하면서 발생한 문제는 한 글자를 입력할 때마다 깜박임이 발생하는 것이었다.

• 이 문제는 Dialog 기능에서 email과 password를 useState를 통해 값을 받으면서 자동으로 리렌더링이 발생하여 나타났다.

• React에서 값이 변할 때마다 리렌더링이 발생하여 TextField를 계속 클릭해야 입력하는 문제를 해결하기 위해, Controlled component 대신 Uncontrolled component를 사용하고, useRef를 이용해 값을 저장하고 submit하는 방식을 사용했다.

• Textfield 태그를 input 태그로 변경하여 ref 요소를 사용하고, onSubmit에서 값을 전달할 때는 HTMLInputElement 형태로 전달할 수 없어 string 타입으로 값을 전달했다. 이렇게 변경하면 firebase에 값이 잘 저장되는 것을 확인할 수 있다.