react

[React] Input Focusing이 없어지는 현상

이슈 발췌일: 2022.08.26 (금) 이슈 내용 입력 폼 안에서 어떤 Input에 값을 입력하고 다른 Input으로 포커싱을 옮기기 위해 클릭을 했을 때, 포커싱이 없어지는 문제점이 있었다. 두 번 이상 클릭해야만 포커싱이 정상적으로 되었다. 해당 현상으로 인해 사용자가 폼에서 데이터를 입력하기 불편해졌다. 전체 폼을 입력하는 시간이 이전보다 길어지게 되는 문제점이 발생했다. 문제 원인 파악 당장 문제 현상만 봤을 때는 어떤 오류인지 감이 잘 잡히지 않았다. 따라서 예상되는 원인을 나열해보고 확인해보는 방식으로 문제 원인을 파악해보려고 했다. 일단 가장 유력한 원인으로 "컴포넌트의 불필요한 리렌더링"을 예측했다. Input 컴포넌트가 클릭되는 순간 어떤 state값이 변경되어 컴포넌트가 리렌더링 되었..

[React] useMemo를 사용한 캐싱으로 중복 호출 방지하기

이슈 발췌일: 2022.09.05 (월) 현재 회사에서는 UI 컴포넌트 라이브러리로 Devextreme을 사용한다. 오늘은 Devextreme의 기능 중 CustomStore를 사용하면서 있었던 이슈에 정리해보려고 한다. Devextreme의 DataGrid나 Lookup 컴포넌트를 사용할 때, 대부분 CustomStore를 만들어주고 이를 컴포넌트에 전달하여 해당 CustomStore로 데이터를 가져오도록 되어있다. Pagination이나 Filter, Sort 등이 필요한 경우에 CustomStore를 사용하면 옵션 값이 바뀌었을 때 알아서 데이터를 다시 가져올 수 있기 때문이다. 사용자의 인터랙션으로 옵션의 값이 바뀌면, CustomStore는 load 함수를 다시 실행하여 데이터를 다시 가져온다...