그럼에도 불구하고

React Query를 공부하다 보면 isLoading과 isFetching에 대해 그냥 지나칠 수 없는데 너무 헷갈려서 정리해보기로 했습니다. 🧑🏻‍💻 isLoading이 끝나지 않는 경우 button을 눌렀을 때 react query를 사용하여 비동기 방식으로 data를 가져올 건데, enabled:false 이면 isLoading이 계속 true인 문제가 발생했습니다. ( button을 누르기 전부터 isLoading 상태임 ) 즉, button을 눌렀다면 enabled: true 가 되어 해당 query의 isLoading이 true에서 false로 변경되고 UI가 보여야 하는 상황인데 보이지가 않았습니다. HTML 삽입 미리보기할 수 없는 소스 왜 계속 Loading 상태가 지속되는걸까... 우..

React Query에서 페이지네이션(Pagination)과 데이터 프리페칭(Prefetching)에 대해 알아보겠습니다. 🧑🏻‍💻 Pagination 예를 들어, 블로그의 게시글을 나열하는데 페이지 번호를 매겨서 나타낼 때가 있습니다. 이때 React Query의 Pagination을 사용하면 현재 페이지(current page) 상태를 통해, 현재 페이지를 파악할 수 있습니다. 📌 사용 예시 최대 페이지의 수는 10 const MAX_POST_PAGE = 10; 사용자가 다음, 또는 이전 페이지로 가는 버튼을 누르면 해당 페이지로 이동하며 currentPage의 상태를 업데이트합니다. React Query는 바뀐 쿼리 키를 감지하고 새로운 쿼리를 실행해서 새 페이지가 표시됩니다. 👉 전체 코드 HTM..

React Query를 TS에서 사용할 때 Type은 어떻게 지정해야 할지 알아보겠습니다. Start! 🧑🏻‍💻 React Query TypeScript React Query는 TypeScript의 제네릭(Generics)을 많이 사용합니다. 이는 라이브러리가 실제로 데이터를 가져오지 않고 API가 반환하는 데이터 유형을 알 수 없기 때문입니다. 공식 문서에서는 타입스크립트를 그다지 광범위하게 다루지 않고, useQuery를 호출할 때 기대하는 제네릭을 명시적으로 지정할 수 있게 알려줍니다. 📌 useQuery 현재 useQuery가 갖고 있는 제네릭은 4개이며, 다음과 같습니다. TQueryFnData: useQuery로 실행하는 query function의 실행 결과의 타입을 지정하는 제네릭 타입입니..

useInfiniteQuery와 Infinite Scroll에 대해 알아보겠습니다. 🧑🏻‍💻 useInfiniteQuery 기존 데이터를 모두 불러왔을 때, 더 많은 데이터를 아래에 불러오는 "무한 스크롤"은 매우 흔한 UI 패턴입니다. Tanstack Query는 이런 리스트형 데이터를 요청하기 위해, useQuery의 유용한 버전인 useInfiniteQuery를 지원합니다. 즉, useInfiniteQuery는 파라미터 값만 변경하여 동일한 useQuery를 무한정 호출할 때 사용합니다. useInfiniteQuery는 전반적으로 useQuery와 동일하지만, useInfiniteQuery와 useQuery의 차이를 비교하며 useInfiniteQuery의 기능을 살펴보겠습니다. 📌 반환 객체에서 ..

React Query에 대해 알아보겠습니다. 🧑🏻‍💻 React Query란? 공식문서에 따르면 React Query란 fetching, caching, 서버 데이터와의 동기화를 지원해 주는 라이브러리라고 합니다. React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다. React Query는 우리에게 친숙한 Hook을 사용하여 React Component 내부에서 자연스럽게 서버(또는 비동기적인 요청이 필요한 Source)의 데이터를 사용할 수 있는 방법을 제안한다고 합니다. - 카카오페이 React Query 설명 인용 또한 카카오페이 프론트엔드 개발자분들의 말을 더 빌려보자면, React Que..

🧑🏻‍💻 React Quill Editor 현재 제 개인 프로젝트에서 React Quill을 이용하여 게시글을 등록하는 작업을 하고 있습니다. 이제 여기서 image를 올려보겠습니다. 이미지를 첨부했을 때 base64로 인코딩 되어 어마무시한 길이의 경로를 볼 수 있습니다. 대충 어느 정도냐면... 이렇게 변환을 거치지 않고 데이터를 전송할 경우 스트링이 너무 길어서 서버에 저장되지 않는 문제가 발생할 수 있습니다. 또한 실제로 작성 후에 게시물을 확인해 봐도 img의 src 경로에 값이 들어가지 않습니다. (sanitizeHtml를 사용하기 때문) 따라서 이 문제를 해결하기 위해 에디터에 이미지 첨부 이벤트가 발생하게 되면 서버(firebase)에 API 요청을 보내 응답 값으로 URL을 돌려받고, 이..

진행 중인 프로젝트 해서 계속되는 List를 최적화하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 Palette Project 이 프로젝트는 현재 제가 진행하고 있는 Palette라는 프로젝트입니다. 위의 사진과 같이 게시물을 차례대로 나열하고 있는데 이 게시물의 수가 무수히 많아진다면, 성능 면에서 어떻게 개선할 수 있을지 알아보겠습니다. 실험 조건: 현재 10명의 사람이 각각 250개의 포스트를 작성하여 총 2500개의 게시물이 있는 상태 측정 방식: Redux Profiler를 이용하여 렌더링 되어있는 post의 reaction 버튼을 눌렀을 때, 다시 렌더링되는 시점을 측정 📌 PostList.tsx HTML 삽입 미리보기할 수 없는 소스 const PostExcerpt = ({post} : {post:..

RTK의 createSelector에 대해 알아보겠습니다. 🧑🏻‍💻 createSelector createSelector는 리덕스 스토어 상태에서 데이터를 추출할 수 있도록 도와주는 유틸리티 함수입니다. 이를 통해 계산 비용이 높은 셀렉터(Selector)함수의 결과를 캐싱하여 성능을 최적화할 수 있습니다. createSelector 함수는 Reselect 라이브러리에 의해 제공됩니다. Reselect는 Redux 애플리케이션의 상태(state)가 바뀔 때만 해당 셀렉터를 다시 계산하도록 제어하여 중복 계산을 방지합니다. 기존의 useSelector의 경우 컴포넌트가 상태를 처리하는 작업이며, 컴포넌트가 리렌더링 되는 문제를 야기할 수 있습니다. 이런 문제를 미연에 방지하기 위해, createSelect..

useEffect와 useLayoutEffect의 차이에 대해 알아보겠습니다. 🧑🏻‍💻 useLayoutEffect 📌 useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, [input]) 📌 useEffect useEffect(() => { effect return () => { cleanup } }, [input]) useLayoutEffect와 useEffect 훅의 형태는 동일합니다. 그렇다면 어떤 부분에서 차이점이 있을까요? ⭐️ useEffect useEffect는 컴포넌트가 render와 paint 된 후 비동기적으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는..

리엑트 렌더링이 두 번 되는 경우 이를 방지하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 React Strict Mode 렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다. HTML 삽입 미리보기할 수 없는 소스 따라서 React.StrictMode Wrapper를 제거해 주면 컴포넌트가 두 번씩 호출되지 않습니다. 📌 존재 이유 StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Frament와 같이 UI를 렌더링 하지 않고, 자식들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. React 공식 문서에 따르면 StrictMode는 아래와 같은 부분에서 도움이 ..

리덕스를 이용한 프로젝트를 만들다가 아래와 같은 오류와 직면했습니다. 🧑🏻‍💻 Non-serializable value 오류 내용을 확인해보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있습니다. 여기서 직렬화란 redux에서 값을 주고 받을 때 object 형태의 값을 string 형태로 변환하는 것을 말합니다. (JSON.stringify) 역질렬화는 직렬화와 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정을 말합니다. (JSON.parse) 즉, Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 발생한 에러입니다. ⭐️ 해결 방법 HTML 삽입 미리보기할 수 없는 소스 export default configureStor..

새로고침해도 redux의 store를 유지하는 법에 대해 알아보겠습니다. 🧑🏻‍💻 Redux-Persist Redux는 새로고침하거나 창을 닫으면 store에 저장된 state가 리셋됩니다. 이를 방지하기 위해 Redux의 Redux-Persist를 사용해 보겠습니다. 현재 Posts 상에 있는 게시물에서 View Post를 누르면 해당 게시물의 상세 페이지로 넘어가고 각각의 게시물마다 nanoid로 지정된 id를 통해 해당 페이지로 이동하고 있습니다. 내 localhost/post/:nanoid 이때 생성된 nanoid는 무작위이며, 새로고침할 때마다 redux store는 기존 state를 가지고 있지 못하고 새로운 nanoid로 생성된 게시물 리스트를 갖고 있습니다. 그렇기 때문에 기존 state가..