728x90 반응형 React23 react-query의 useQuery 언제 사용할까? react에서 비동기 로직을 리엑트스럽게 다루게 해주는 라이브러리다. 기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하기엔 다소 까다롭거나 귀찮은 기능을 제공해준다. 따라서 위와 같은 코드를 구현 할 때 사용한다면 그 매력에 빠지게 될 것이다! 기존 fetch 방식은 어땠을까? 기존 fetch 방식부터 살펴보자! 이 귀찮은 작업들을 React Query를 사용하면 자동으로 실행되게끔 코드를 작성할 수 있다. const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { const response = await .. 2023. 7. 12. [React + TS] 무한스크롤 구현하기 기업과제를 진행하면서 무한 스크롤을 적용시켰다. 검색어를 입력하면 그에 따른 추천 검색어들이 드롭다운에 보여지게 되는데, 처음에는 10개가 노출되고, 추천 검색어가 10개 이상이면 무한스크롤을 사용해서 추가 데이터(10개)를 계속해서 화면에 보여주는게 구현 목표였다. 스크롤 바가 마지막 컨텐츠를 보여주는 시점에 추가적인 데이터를 제공할 수 있도록 구현했다. 마지막 컨텐츠를 보여주는 시점은 아래와 같다. 스크롤바를 제외한 컨텐츠 높이 + 스크롤된 거리 >= 스크롤바를 포함한 전체 높이 컨텐츠 높이와 스크롤된 거리가 스크롤바를 포함한 전체 높이보다 크거나 같을 때 스크롤을 끝까지 완료한 것이고, 마지막 컨텐 츠가 보이는 시점이 되는 것이다. 위의 내용을 바탕으로 바로 코드를 작성해도 되지만, 문제가 있다. .. 2023. 5. 23. [react] 검색어 입력마다 API가 호출되지 않도록 API 호출 횟수 줄이는 법 input창에 검색어를 입력할 때마다 API가 호출되지 않고, 특정 기준(ms)동안 입력이 되지 않았을 때 입력된 값으로 API를 호출하도록 해줬다. 왜냐하면 유료 API를 사용했을 때, 입력마다 API가 호출되는 것이 큰 문제가 될 수 있기 때문이다. 예를 들어, 구글지도 API와 같은 것을 사용할 때 입력할 때마다 쿼리를 날리면 엄청난 손해이다. 쿼리 하나하나가 모두 돈이기 때문이다. debouncing useDebounce라는 훅을 만들어서 사용을 했는데, 먼저 debouncing이 뭔지에 대해 알아보자. debouncing은 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출되도록 하는 것이다. 디바운싱은 앞에서 언급했던 상황처럼 검색에 자주 사용된다. 코드 구현 1. useDebou.. 2023. 5. 12. [react] onKeyDown 이벤트 + 한글 입력 시 함수가 두 번 실행되는 문제 해결하기 검색창에 검색어를 입력하고 키보드를 사용하여 위아래에 이동 시, 맨 처음에만 2칸이 이동되는 문제가 있었다. 즉, 맨 처음에 키보드를 사용하여 추천 검색어들을 이동할 때 함수가 2번 실행되는 문제점이 있었다. 결과적으로 조건식에 e.nativeEvent.isComposing === false를 추가해 주면 문제점은 해결된다. keyboardEvent.isComposing 이는 입력한 문자가 조합문자인지 아닌지를 판단한다. 한글은 조합문자이고, 영어는 조합문자가 아니다. 한글을 입력할 때 자세히 보면 입력 중인 글자 바로 아래 검은 밑줄이 생기는 경우가 있는데, 이 밑줄이 보이는 상황에서 키를 입력하면 이벤트가 2번 발생하는 이슈가 있다. 왜냐하면 글자가 조합 중인지, 조합이 끝난 상태인지 파악이 어렵기 .. 2023. 5. 9. [react + vercel] cra vercel로 배포하기 + cors 이슈로 인한 proxy 설정 문제 상황 cra를 vercel로 배포하려고 하는데 오류가 발생했다. Uncaught (in promise) SyntaxError: Unexpected token ' 2023. 5. 8. 이전 1 2 3 4 5 다음 728x90 반응형
