일단 해보는 기록

React Suspense 동작 원리 이해와 직접 구현해 보기

Suspense는 비동기 작업이 실행되면 이를 감지하고, 서스펜드 상태로 전환하여 작업이 완료될 때까지 fallback UI를 보여줄 수 있도록 도와준다.  Q. 비동기 작업을 어떻게 감지할까요?A. 컴포넌트 안에 비동기 함수가 있으면 Suspense가 찰떡 같이 알아보고 실행되는 거 아닌가요? 🙄 그래서 어떻게 찰떡 같이 알아볼까?비동기로 데이터를 받아오기 위해 `useSuspenseQuery` 사용에러 처리를 위해 `ErrorBoundary` 적용`Suspense` 적용에러가 나면 그 에러를 해결하기 위해 다음을 적용하면서 에러 돌려 막기가 되어버렸다. 마지막 Suspense까지 적용을 끝내고 새로운 에러를 만나 해결하다가 개념 정리를 위해 정리해 본다.동작 원리 생각해 보기Suspense는 비동..

React 전역 Modal 추상화 정복기 - (3)

Context와 Custom Hook에게 역할 부여하기 -이미 만들어져 제공되는 것들(API, 라이브러리 등)은 이전에 느꼈던 불편함을 해소하기 위함이다. 해결의 과정에서 앞으로 생길 수 있는 모든 불편함까지 고려할 수는 없기 때문에 그 기능들은 각자의 역할과 목적을 분명히 갖는다. 이유 없이 사용하는 습관을 고쳐 보자.1. renderModal에 1개의 모달 바인딩하기한 번에 모든 문제를 해결해 보려다가 모달 상태를 배열이 아닌 1개씩만 저장하는 생뚱맞은 구조로 변경했다. 단일 엘리먼트를 상태에 저장하게 되면서 다중 모달을 열게 될 경우에는 이전 모달이 닫힌 후 새로운 모달이 열리는 식으로 동작한다. 서비스에 따라 원하는 방향일 수도 있지만 내가 의도한 방식은 아니었다.⚠️ 문제`renderModal`..

React 전역 Modal 추상화 정복기 - (5)

모달 내부에서 서버 통신을 위한 로직 개선 -열린 모달의 내부에서 사용자의 액션에 따라 서버 통신을 하도록 개선한다.모달 컴포넌트와 호출 컴포넌트의 역할 분리로 재사용이 가능하면서 선언적으로 사용할 수 있도록 한다.모달에 갇힌 서버 응답값 구출야무지게 모달을 완성했다고 생각했지만, 정작 모달이 필요한 이유였던 채팅방 생성 모달을 구현하려고 하니 비동기 처리가 되지 않는다는 사실을 알게 되었다. 그 말은 지금까지 만든 모달은 `Confirm`의 역할만 하고 있는 것이다. 더 이상 useModal 파일을 보지 않아도 될 것이라 생각했는데 결국 다시 뒤엎는 과정을 겪었다. 이쯤엔 거의 10차가 넘어가는 리팩토링 단계였기 때문에 그냥 넘어갈까?라는 고민도 많이 했다. 하지만 이 또한 궁금함과 하다가 만 느낌을 ..

낙관적 업데이트, 좋아요 말고 어디에 쓸까?

들어가며취미로 개발을 배울 때, 상태라는 개념과 활용도 알까 말까 하며 Redux(툴킷 X)도 겨우 이해하고 있는데 서버 상태라는 개념에 좌절했던 기억이 난다. 완전히 개발자로의 전향을 결심한 뒤에 시작한 모든 프로젝트에는 React Query를 사용했다. 처음에는 데이터 페칭 상태 관리가 너무 편해서 사용했고, 최근 스크럼블 프로젝트에서는 백엔드와 협업하면서 네트워크 호출을 줄이기 위한 고민을 많이 하게 되면서 알차게 활용할 수 있었다. * TanStack Query로 명칭이 변경되었지만, 해당 글에서는 React Query로 사용했다. React Query, 꼭 써야 할까?리액트 쿼리를 프로젝트에 도입하는 주요 목적은 데이터 페칭에 대한 상태 관리와 캐싱으로 생각해볼 수 있다. 서버와의 통신은 언제나..

[React] 데이터 페칭과 렌더링을 위한 3가지 방법

여러 개의 데이터를 담고 있는 리스트를 렌더링 하는 기능은 생각보다 많다. 어쩌면 어떤 프로젝트에도 1개쯤은 있기 마련이다. 채팅 서비스를 만들면서 처음 기획할 때에는 채팅방 목록은 페이지네이션으로, 메시지창은 무한스크롤로 적용하려고 했다. 어느 정도 기능 구현이 완료된 다음에 이 2가지 기능을 적용하려고 보니 이 또한 너무 일반적이고 자주 사용되는 기능이라 라이브러리보다 직접 경험해 보는 것이 낫다고 판단했다.  오픈 API를 이용하여 여러 방법을 테스트해 보았는데 그 순서는 아래와 같다.구현순서Chapter.01페이지네이션 무한스크롤가상스크롤Chapter.02TanStack-Query + 페이지네이션TanStack-Query + 무한스크롤TanStack-Query + 무한스크롤 + 가상스크롤 기본 예..