sliver__

웹 애플리케이션을 개발하다 보면 사용자가 어떤 작업을 완료하도록 유도하기 위해 모달 창을 사용하는 경우가 많습니다. 이번 글에서는 React의 createPortal 기능을 활용해 모달 컴포넌트를 구현하는 방법을 단계별로 소개하겠습니다.포털 기능이 필요한 이유초기에는 position: fixed와 z-index 속성을 활용해 간단한 모달을 만들 수 있습니다. 하지만 다음과 같은 문제들이 발생할 수 있습니다. 부모 요소에 overflow: hidden이 적용되면 모달이 잘릴 수 있음 스타일 계층 구조에 따라 모달 위치가 의도치 않게 바뀔 수 있음이러한 문제를 해결하고 재사용 가능한 컴포넌트를 만들기 위해 React의 createPortal 기능을 사용하는 것이 좋습니다.기본적인 구조 설계1. 모달 컴포..

리액트(React)를 사용하다 보면 컴포넌트를 조립식으로 구성하고, 사용자에게 유연한 API를 제공하고 싶을 때가 많습니다. 이럴 때 강력한 해법이 되어주는 것이 바로 Compound Component 패턴입니다.이 글에서는 카운터(counter) 예제를 통해 Compound Component 패턴의 원리와 구현 방법을 쉽게 설명하고, 왜 이 패턴이 유용한지 이해할 수 있도록 도와드립니다.Compound Component 패턴이란?Compound Component 패턴은 말 그대로 서로 밀접한 관계를 가진 여러 개의 컴포넌트를 하나의 부모 컴포넌트로 묶어 사용하는 방식입니다. 마치 HTML의 와 처럼요. My Super Flexible Counter 이렇게 작성하면 컴포넌트의 구성 요소를 자유..

React에서 재사용 가능한 코드의 유형React에서는 다음 두 가지 주요 유형의 코드를 재사용하게 됩니다:UI (JSX) 재사용→ 컴포넌트 + props컴포넌트는 UI를 재사용하는 가장 기본 단위입니다.props를 통해 외부에서 커스터마이징할 수 있는 API를 제공합니다.더 나아가 children을 사용하면, 내부 콘텐츠도 동적으로 구성할 수 있습니다.상태가 있는 로직 (stateful logic) 재사용→ 커스텀 훅 (custom hooks)useSomething 형식으로 필요한 React 훅들을 조합해서 재사용 가능한 로직을 만듭니다.비상태 로직 (non-stateful logic)→ 그냥 일반 JavaScript 함수로 처리하면 충분합니다.고급 패턴이 필요한 이유UI와 상태를 동시에 재사용하고 싶..

프론트엔드 개발에서는 단순히 데이터를 불러오고 표시하는 것 이상으로, 삭제나 추가 같은 사용자 상호작용을 시각적으로 피드백하는 UX가 매우 중요합니다. 이번 글에서는 다음 세 가지 기술 조합을 통해 완성도 높은 삭제 기능을 구현해보겠습니다:React Query – 비동기 상태 관리와 캐시 무효화Axios – API 요청 도구React Hot Toast – 세련된 알림(Toast) UI 제공목표 기능사용자가 캐빈 삭제 버튼을 누르면:Axios로 REST API 요청 전송 (DELETE)React Query로 상태 업데이트 및 캐시 무효화React Hot Toast로 성공/실패 알림 표시삭제 후 자동으로 UI 갱신1. React Hot Toast 설치 및 설정먼저 react-hot-toast 라이브러리를 설..

웹 애플리케이션에서 데이터를 불러오는 것도 중요하지만, 삭제(Delete) 같은 데이터 변경 작업도 꼭 필요합니다. 이번 글에서는 React Query의 useMutation 훅을 활용해 Axios 기반 REST API에서 데이터를 삭제하고, 자동으로 UI를 업데이트하는 방법을 예제로 설명합니다.React Query에서 데이터 삭제는 어떻게 할까?React Query는 데이터를 가져올 때는 useQuery,데이터를 변경할 때는 useMutation 훅을 사용합니다.useQuery → 데이터 읽기 (GET)useMutation → 데이터 쓰기/삭제/변경 (POST, DELETE, PUT 등)이번에는 Axios를 사용해 캐빈(cabin) 데이터를 삭제하는 기능을 구현해 보겠습니다.1. Axios로 API 요..

프론트엔드 개발에서 데이터를 가져오는 작업은 매우 자주 발생합니다. 이번 글에서는 Axios를 사용해 REST API로부터 캐빈 데이터를 받아오고, React Query로 상태를 관리하는 예제를 소개합니다. 특히 React Query의 자동 캐싱, 로딩 상태, 에러 처리 기능을 함께 활용해 더욱 깔끔하고 효율적인 코드 구조를 만드는 방법을 알아보겠습니다.왜 React Query + Axios 조합이 좋은가요?많은 개발자가 fetch 대신 axios를 선호하는 이유는 다음과 같습니다:응답 데이터를 자동으로 JSON으로 파싱에러 핸들링이 일관됨요청 인터셉터, 응답 인터셉터 등 확장성 높음이와 함께 React Query를 사용하면:중복 네트워크 요청 방지 (자동 캐싱)브라우저 포커스 시 자동으로 데이터 새로고..