Search for a command to run...
Series
리액트 관련 개념, 기술, 그리고 고민했던 문제들과 해결 과정들을 기록합니다.
CSR 환경에서 비동기 요청의 성공과 실패, 로딩 케이스를 분리하여 유지보수성과 가독성 높은 구조를 만들고, 동시에 사용자에게 최적의 UX를 제공하기 위한 구조 설계 ✅ React Query를 사용하는 이유 React Query는 React에서 서버 상태를 효율적으로 관리할 수 있도록 도와주는 라이브러리입니다. Boilerplate 코드의 감소 React Query를 사용하면 useState, useEffect, try-catch 등 반복...
React에서 <Modal />이나 <Toast /> 같은 오버레이 UI를 다루다 보면, 생각보다 코드가 깔끔하게 유지되지 않더라고요. 처음에는 useState 하나로도 충분해 보이지만, 모달이 많아지고 복잡해질수록 금세 코드가 지저분해지기 시작합니다. 이 글에서는 제가 직접 겪었던 문제들을 바탕으로, 모달을 더 선언적으로 관리하는 방법을 정리해보려 합니다. 기존 방식: 명령형 접근의 문제 보통은 이런 식으로 모달을 제어하죠: const [is...
useSyncExternalStore란? 외부에 있는 상태가 바뀌었을 때, React 컴포넌트를 자동으로 다시 렌더링하게 도와주는 훅입니다. 이는 React가 기존에 가지고 있던 구조적인 한계를 극복하기 위한 시도라고 볼 수 있는데요. 이번 글에서는 useSyncExternalStore가 왜 필요한지, 어떤 문제를 해결하는지에 대해 최대한 쉽고 자세하게 정리해보겠습니다.다. 기존 문제점 1.Context의 구조적 한계 React는 기본적으로 트...
React에서 Context를 사용할 때 자주 겪는 대표적인 문제는 바로 불필요한 리렌더링입니다. 이 글에서는 Context의 리렌더링 구조를 짚어보고, toss의 overlay-kit에서는 이 문제를 어떻게 해결하였는지 그 구조와 원리를 자세히 살펴보겠습니다. https://github.com/toss/overlay-kit/tree/main/packages 1️⃣ 일반적인 리렌더링 vs Context 리렌더링 일반적인 리렌더링 부모 컴포...
React 프로젝트를 시작할 때, 예전에는 대부분 create-react-app(CRA)을 썼습니다.하지만 요즘은 거의 모든 새로운 React 프로젝트가 Vite를 선택하죠.CRA도 잘 돌아가는데, 굳이 Vite를 써야 하는 이유가 뭘까요? 1️⃣ CRA의 문제점 : Webpack 기반 CRA는 내부적으로 Webpack을 사용해서 앱을 실행하고 번들링합니다.Webpack은 오랜 기간 CommonJS(CJS) 생태계에 최적화되어 있었어요. 하지...
직접 써보고 느낀 서버 상태 관리의 필요성이제는 React Query로 서버 상태를 관리하는것이 거의 필수가 된 거 같아, React Query 없이 하면 얼나 불편할까 몸소 경험해보고자..? React Query 없이 구현해보고자 했습니다. 🔙 과거 방식: 전통적인 API 요청 방식 const [loading, setLoading] = useState(true); const [error, setError] = useState(null); ...