최근 Context API와 Recoil을 비교하면서 위 주제에 대해 이야기하게 되었다. 이에 대한 의견이 나뉘어서 이에 대해 직접 확인해 보는 시간을 가졌다. 먼저 Context의 개념을 알아보고, 코드를 보면서 상태 변화에 따른 렌더링이 어떻게 발생하는지 알아보자. 그 이후에 useMemo, memo 등을 적용해 보면서 최적화하고, Context가 상태 관리 라이브러리를 대체할 수 있는지 생각해 보자. Context 알아보기 Context란 props drilling: 상위 컴포넌트에서 제공하는 데이터를 하위 컴포넌트로 필요한 위치까지 계속해서 넘기는 것 Context API는 이를 극복하기 위해 등장한 개념이다. 명시적 props 전달 없이도 하위 컴포넌트 모두에서 자유롭게 원하는 값을 사용할 수 ..
크롬 개발자 도구 사용 중에 실수로 불편을 겪을 수 있는 문제라고 생각되어 공유하게 되었습니다. 문제 상황 리액트 애플리케이션이 잘 동작하는데 리로드만 하면 자꾸 react-dev-tools에서 다음과 같은 에러가 발생하며 페이지가 무한 로딩 되는 문제가 있었습니다. Looks like this page doesn't have React, or it hasn't been loaded yet 그리고 네트워크 탭을 확인했을 때 아래와 같이 스크립트 로드가 실패하는 것을 확인할 수 있었습니다. 분명히 리액트로 만들어진 페이지고, DevTools를 끄면 잘 동작하는데 왜 이런 걸까요..? 해결 스택오버플로우의 이 글에 따르면 크롬 DevTools 디버거가 breakpoints에서 멈추는 경우 페이지를 리로드 하..
이전에 React Query meets React Router라는 글을 읽고 데이터를 효율적으로 가져올 수 있는 방법이라고 생각되어 노션에 정리해 두었는데, 최근 사용자 경험을 개선하는 작업을 하면서 적용해 보았습니다. 이 과정에서 알게 된 내용과 고민했던 지점들을 공유하려고 합니다. Preloading? Prefetching? 필요한 리소스를 미리 다운로드한다는 의미에서 preload와 prefetch가 헷갈릴 수 있다고 생각되어 먼저 알아보겠습니다. 브라우저의 리소스 로드 우선순위 지정 유형 가운데 link 태그의 preload와 prefetch를 살펴보겠습니다. preload는 현재 페이지에서 즉시 필요로 하는 리소스를 우선적으로 가져오는 작업입니다. 이 리소스는 브라우저의 주요 렌더링 절차 이전..
혹시 개발 중에 앱이 에러를 잡지 못해 발생하는 아래의 에러 화면을 보신 적이 있으신가요?위 에러의 내용을 살펴보면 React Router는 더 나은 UX를 위해 ErrorBoudary를 제공할 것을 권장하고 있습니다. 그렇다면 ErrorBoundary는 어떻게 동작하고, 어떤 방식으로 사용하면 좋을까요? 최근에 진행한 개인 프로젝트와 과제에서 더 나은 사용자 경험을 위해 ErrorBoundary를 통한 에러 핸들링을 하는 과정에서 가졌던 의문점과 고민, 그리고 해결 방법을 공유하고자 합니다. 해당 포스팅은 React 공식 문서와 React-Query 공식 블로그를 바탕으로 ErrorBoundary의 역할과 ErrorBoundary가 잡을 수 있는 에러 유형, React Query에서의 에러 핸들링 전략..
문제점 가게 상세 페이지에서 해당 가게에 대한 댓글을 렌더링할 때 페이지네이션을 통해 5개씩 가져오도록 구현해야 했다. 댓글 페이지네이션은 queryKey에 현재 페이지를 넣어 새로운 페이지 버튼을 클릭할 때마다 데이터를 fetching하는 방법으로 진행했다. 이 과정에서 페이지 버튼 클릭 시, 새로운 데이터를 가져올 때마다 화면이 깜빡거리는 문제가 발생하였다. 처음에는 전체 댓글 영역이 고정되어 있지 않아 댓글 데이터를 로드하는 중에 화면에 영역이 표시되지 않아서 발생하는 문제라고 생각했다. 따라서 스켈레톤 UI를 먼저 표시하고, 데이터 로드가 완료되면 댓글이 렌더링되도록 했지만 해결되지 않았다. 이후 react query 공식 문서의 Paginated Queries 관련 내용을 읽고, 다음과 같은 원..
쿼리 키는 리액트 쿼리를 사용하는 데 핵심적 역할을 한다. 이 쿼리 키를 잘 이해하지 못하고 사용하면, 캐시를 업데이트하거나, 필요한 캐시를 가져오는 게 내 마음 같지 않다.. 분명히 getQueryData를 하는데 계속 undefined가 출력된다거나 invalidateQueries를 했는데 화면이 원하는대로 업데이트되지 않는다면 쿼리 키를 잘못 사용하고 있을 가능성이 크다. 좌절하지 말고 하나씩 확인해보고 이해가 안 되면 아래를 읽어보자 ! 확인할 사항 쿼리 키를 사용하여 직접적으로 쿼리 캐시에 접근하는 메서드(invalidateQueries, setQueryData, getQueryData 등) 사용 시, useQuery로 받아온 데이터를 캐싱하고 있나요? 변하는 값에 따라 refetch해야 하는 ..
MYCHELIN 프로젝트에서 가게 상세 페이지를 맡아 진행하면서 해당 가게에 대한 댓글과 저장 데이터를 서버에서 받아와 렌더링하고, 추가, 삭제 등의 mutation을 해야 했다. 이때 React Query를 이용해 받아온 데이터를 캐싱해 사용했다. 유저가 해당 가게를 저장하거나 저장을 취소하고, 댓글을 남기거나 삭제했을 때 즉각적인 피드백을 하기 위해 useMutation, setQueryData, 그리고 invalidateQueries를 통한 낙관적 업데이트를 했다. TL;DR useQuery로 고유한 쿼리 키를 사용해 데이터를 캐싱한다. useMutation으로 서버 데이터를 업데이트한다. mutation 이후에 화면을 바로 업데이트할 필요가 없다면 useMutation에 mutationFn을 전달..
mutation이란 ? 일반적으로 mutation은 부수 효과(side effect)가 있는 함수를 말한다. 예를 들어, 배열의 push 메서드는 원본 배열을 변경하는 부수효과가 있는 함수이다. 같은 맥락에서 React Query의 useMutation은 서버에 부수 효과(side effect)를 일으킨다. 데이터 추가, 삭제 또는 유저의 로그인 모두 이 경우에 해당한다. useQuery와 useMutation useQuery와 useMutation을 처음 보면 어떤 상황에서 사용해야 하나 헷갈릴 수 있다. useQuery는 GET 요청과, useMutation은 POST, PATCH, DELETE 요청과 유사하다고 생각하면 된다. 언제 사용하면 될까? useQuery는 고유한 쿼리 키를 기반으로 서버에..
