개발 메모장 개발 메모장

React

• 클로저·this·viewport를 지키며 큰 컴포넌트를 쪼갠 작업기

  React 2026. 7. 15. 17:26

  "이 컴포넌트 너무 크니까 좀 쪼개 줘." 이 요청을 받으면, 사람이든 AI 에이전트든 가장 쉽게 빠지는 함정이 줄 수(LOC)를 줄이는 데 최적화하는 것이다. 함수로 뽑고 helper로 흩어 메인 본문을 짧게 만든다. 지표는 좋아진다. 그런데 화면이 깜빡이고, 차트 호버가 죽고, 다른 탭에 다녀오면 그래프가 어긋났다. 기술 트렌드를 시각화하는 한 화면(기술 트리·버블 차트·보고서)을 다섯 갈래로 쪼개면서 나는 이걸 다섯 번 확인했다. 큰 컴포넌트·훅을 분해해 봤고 useEffect나 차트 라이브러리에서 미묘한 회귀를 겪어 본 사람이라면 익숙한 장면일 것이다.줄을 세는 일과 의미를 지키는 일은 다르다분해를 하다 보면 매번 같은 단어로 돌아왔다. 런타임 계약. 코드가 겉으로 드러내지 않지만 동작이 의존하는..

  Read More
• Zustand stale 플래그와 변경 직전 pre-fetch로 VERSION_CONFLICT 숨긴 작업기

  React 2026. 7. 13. 19:23

  프로젝트 소스 패널에서 폴더를 삭제했을 뿐인데 "잠시 후 다시 시도해 주세요"라는 빨간 토스트가 떴다. 코드를 따라가 보니 서버 응답은 400 VERSION_CONFLICT였다. 우리 서버는 폴더 변경에 낙관적 동시성 제어를 쓴다. 폴더마다 version: number를 들고 있고, 삭제·이름 변경·이동 요청에 내가 알고 있는 expectedVersion을 실어 보내면 서버가 현재 버전과 비교한다. 어긋나면 거부한다. 문제는 사용자 모르게 그 버전이 올라가는 경로가 있었다는 것이다. 외부 소스를 폴더로 적재하는 백그라운드 "불러오기" 작업이 끝나면 서버 폴더 버전이 오른다. 그런데 브라우저 캐시는 옛 버전 그대로다.재현 경로는 이랬다. 사용자가 불러오기를 시작하고, 모달을 닫거나 새로고침하고, 백그라운드..

  Read More
• React Flow·dnd-kit·zundo로 트리 편집기 작업기

  React 2026. 7. 10. 19:02

  노드를 끌어다 놓아 트리를 편집하고, 순서를 바꾸고, Ctrl+Z로 되돌린다. 요구사항만 보면 평범하다. 노드 캔버스는 React Flow(@xyflow/react), 드래그 정렬은 dnd-kit, undo/redo는 zundo(Zustand 미들웨어)를 쓰면 된다. 각 라이브러리의 README 예제는 5분이면 동작한다.문제는 이 넷을 같은 DOM, 같은 마우스 이벤트, 같은 상태 트리 위에 포개는 순간 시작됐다. React Flow는 노드 클릭을 자기가 처리하려 하고, dnd-kit도 같은 mousedown을 노리고, zundo는 store에 일어나는 모든 변경을 히스토리에 쌓으려 하고, 캔버스 컨테이너의 overflow는 드롭다운을 가둔다. 기능을 구현하는 시간보다 이 충돌을 격리하는 시간이 더 길었..

  Read More
• React useOptimistic vs React Query optimistic updates: 낙관적 업데이트, 무엇을 선택할까?

  React 2025. 9. 1. 18:59

  사용자가 어떤 액션을 취했을 때 서버 응답을 기다리지 않고 UI에 미리 성공한 것처럼 반영하는 것을 낙관적 업데이트라고 합니다. 예를 들어 SNS에서 댓글을 달면 서버 응답 전에 곧바로 댓글이 화면에 나타나고 “전송 중...”이라고 표시되는 경험을 본 적이 있을 것입니다.성공 시에는 그대로 두고, 실패 시에는 UI를 다시 원래대로 돌립니다. 이러한 기법은 미묘한 시간 지연으로 인한 답답함을 줄여 사용자 경험을 개선하지만, 동시에 실패 시 UI를 되돌리고 오류를 알리는 처리가 중요합니다. 낙관적 UI 업데이트를 활용하면 서버 처리 중에도 “Sending...”과 같은 상태를 즉시 표시할 수 있습니다. 위 이미지는 사용자가 댓글을 작성하자마자 UI에 (Sending...) 라벨이 나타나는 예시입니다. 서버 ..

  Read More
• React의 Synthetic Event는 어떻게 작동할까?

  React 2025. 8. 14. 19:46

  React의 이벤트 시스템, 즉 SyntheticEvent는 단순히 개발 편의를 위해 추가된 요소가 아닙니다.이것은 파편화된 브라우저 환경이라는 현실적 제약 속에서 일관되고 예측 가능한 UI 개발을 가능하게 하려는 React의 근본적인 아키텍처 설계의 산물입니다. React가 등장하기 전, 개발자들은 브라우저마다 제각각인 이벤트 모델과 비표준 API 구현 때문에 '크로스 브라우징'이라는 거대한 장벽에 끊임없이 부딪혔습니다.Internet Explorer의 attachEvent와 다른 브라우저의 addEventListener, 이벤트 객체의 속성 차이 등은 개발자에게 끝없는 if/else 분기문과 폴리필(Polyfill)의 늪을 선사했습니다. 이는 jQuery와 같은 라이브러리가 DOM을 직접 조작하며 복..

  Read More
• React Portal에 대해 알아보기 (Feat. Next.js 예시)

  React 2024. 11. 16. 15:57

  React를 사용하다 보면 컴포넌트 트리 구조 내에서 DOM 구조와 시각적인 표현이 일치하지 않는 상황을 마주할 때가 있습니다.이런 경우에 React Portal은 강력한 도구로 활용될 수 있습니다.이번 글에서는 React Portal의 작동 원리부터 실제로 어떻게 활용할 수 있는지 살펴보겠습니다.1. React Portal이란 무엇인가?React Portal은 React 16부터 도입된 기능으로, 현재의 컴포넌트 계층 구조 밖의 DOM 노드로 자식을 렌더링 할 수 있게 해 줍니다.일반적으로 React 컴포넌트는 부모 컴포넌트의 DOM 노드 내에 렌더링 되지만, Portal을 사용하면 컴포넌트를 DOM 트리의 다른 위치에 렌더링 할 수 있으면서, 그리하여 논리적으로는 기존의 컴포넌트 트리 구조를 유지할 ..

  Read More
• React Floating Button 만들기 (with Intersection Observer)

  React 2024. 11. 9. 21:13

  플로팅 버튼(Floation Button)은 사용자 경험을 높이기 위해 자주 사용되는 요소 중 하나입니다.Intersection Observer를 활용해 Footer 영역에서 멈추는 플로팅 버튼을 구현해 보겠습니다.1. 인피니티 스크롤 구현인피니티 스크롤은 사용자가 스크롤을 내릴 때마다 새로운 콘텐츠를 불러오는 기능입니다.간단한 예제로 구현해 보겠습니다.// App.jsimport React, { useState, useEffect } from 'react';function App() { const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => i)); const loadMore = () => { setItems((prevI..

  Read More
• Compound Component 패턴 (feat. React, Next.js)

  React 2024. 9. 21. 13:55

  Compound components는 React에서 더 표현력 있고 사용자 정의가 가능한 컴포넌트 API를 만들 수 있게 해주는 강력하고 유연한 패턴입니다.이 패턴은 특히 여러 관련 부분을 가진 복잡한 UI 컴포넌트를 구축할 때 유용합니다.이 개념에 대해 자세히 알아보고 Next.js에서 어떻게 구현할 수 있는지 살펴보겠습니다.Compound Components란 무엇인가?Compound components는 함께 작동하여 일관된 기능 단위를 형성하는 컴포넌트 그룹입니다.주요 아이디어는 공유 상태와 동작을 관리하는 부모 컴포넌트를 만들고, 자식 컴포넌트가 특정 부분의 렌더링을 처리하도록 하는 것입니다.Compound components 사용 시 주요 이점향상된 유연성과 사용자 정의 가능성관심사의 더 나은..

  Read More