이번 프로젝트에서 파파고 API를 통해 번역할 수 있는 번역 기능을 넣었는데, 번역할 문장을 인자로 보낼 때 어떻게 해야할지 고민이 있었다. onChange로 하기에는 입력하는 동안 계속 리렌더링이 되는 문제가 있고, ref로 하려고 하니 번역할 문장 입력하는 곳에 내용을 지웠을 때 번역 결과 나오는 곳에 대한 이벤트를 해주기가 어려웠다.
그런 고민 끝에 찾은 방법이 onFocus와 onBlur다. onFocus는 포커스를 받은 경우에 발생하는 이벤트고, onBlur는 포커스가 해지될 때 발생하는 이벤트다. 그래서 이런 식으로 적용해보았다.
<textarea
className="translate-text"
onBlur={(e) => {
setText(e.target.value);
}}
onFocus={() => {
if (!text) setResult('');
}}
/>onBlur로는 포커스가 해지될 때 그 값을 가지고 서버에 요청할 수 있도록 했고, onFocus로 포커스를 받은 경우 입력된 text가 없다면 번역 결과가 나오는 곳의 값을 비워주도록 했다.
