728x90 react19 MUI DataGridPro Drag & Drop 시 selection 상태가 undefined로 나오는 문제 해결 🧨 문제 상황 및 원인 분석파일 리스트에서 드래그 기능을 구현하던 중, 선택된 항목을 기반으로 데이터를 설정하려 했지만 selectedItems가 undefined로 나와 드래그 대상 판단이 되지 않았음.🧪 시행착오 및 중간 시도들 useCallback 의존성에 selectedItems 포함 → 여전히 drag 이벤트 시점에서는 반영되지 않음useEffect에서 selectedItems 확인 시 정상 → 렌더 타이밍과 이벤트 타이밍 불일치최종적으로 클로저 문제로 판단 🧾 개선 코드 (배열만 처리)const selectedItemsRef = useRef([]);useEffect(() => { selectedItemsRef.current = selectedItems;}, [selectedItems]).. 2025. 6. 12. [React] ResizeObserver로 이미지 주석 입력창의 위치 오류 해결하기 1. 문제 상황 및 원인 분석이미지 기반 주석 입력창의 위치를 잡기 위해 paperRef의 clientWidth/Height를 참조했으나, 렌더링 시점 차이 및 DOM 변경에 따른 미세한 오차로 인해 입력창이 중앙에서 어긋나는 문제가 발생했다.2. 시행착오 및 중간 시도들style 안에서 직접 clientWidth 계산식 사용초기 useEffect 내에서 수동 측정결과적으로 ResizeObserver 도입3. 이전 코드style={{ width: paperRef?.current?.clientWidth ? paperRef.current.clientWidth + 8 + 'px' : undefined, height: paperRef?.current?.clientHeight ? paperRe.. 2025. 6. 10. MUI DataGridPro에서 "Rendered fewer hooks than expected" 오류 해결기 – renderCell 내 Hook 분리로 해결 작성 배경 및 문제 상황React + MUI DataGridPro 환경에서 특정 컬럼을 pin to left(좌측 고정) 했을 때 아래와 같은 치명적인 오류가 발생:Rendered fewer hooks than expected. This may be caused by an accidental early return statement.같은 컬럼을 pin to right(우측 고정) 했을 때는 정상 작동하지만, 좌측 고정 시에만 오류 발생. 또한, i18next를 활용한 다국어 설정 변경 후 다이어로그를 다시 열었을 때도 같은 오류가 간헐적으로 발생함.원인 분석해당 오류는 React에서 Hook 호출 순서가 불일치할 때 발생함. 특히 다음과 같은 경우에 자주 발생:renderCell 함수 내부에서 useSt.. 2025. 6. 10. Material UI Popper 컴포넌트 버그 케이스 대응 기록 및 동작 구조 목차Popper 컴포넌트 소개버그 케이스별 대응 기록위치 설정 오류렌더링 타이밍 이슈리사이징 및 스크롤 문제z-index 및 오버레이 이슈Popper 동작 구조 도식화렌더링 프로세스포지셔닝 메커니즘가상 요소 활용최적화 전략Popper 컴포넌트 소개Material UI의 Popper 컴포넌트는 @popperjs/core 라이브러리를 기반으로 구현된 컴포넌트로, 툴팁, 드롭다운, 메뉴 등 다양한 팝오버 UI 요소를 화면에 표시하는 데 사용됩니다. Popper는 포털(Portal)을 통해 DOM의 계층 구조와 독립적으로 렌더링되며, 지정된 앵커 요소(anchorEl)를 기준으로 위치가 계산됩니다.import { Popper } from '@mui/material'; {({ TransitionProps }) .. 2025. 4. 22. [React] Material-UI Popover 위치 보정과 애니메이션 적용 시행착오 기록 이번 글에서는 Material-UI의 Popover 컴포넌트 사용 중 겪었던 시행착오와, 위치 보정 및 자연스러운 애니메이션을 적용하기까지의 해결 과정을 기록합니다.1. 문제 상황처음에는 Material-UI의 Popover를 사용하여 특정 버튼을 클릭하면 팝업이 열리도록 구현하였습니다. 하지만 팝업 내부의 내용이 확장될 때 다음과 같은 문제가 발생했습니다.내용이 확장되면 Popover가 화면 밖으로 벗어나는 현상Popover 위치가 자동으로 보정되지 않아 부자연스러운 UI위치 보정이 되어도 움직임이 너무 딱딱해서 UX가 나쁨2. 처음 시도한 방법 (실패)처음에는 Popover를 Popper로 변경하여 popperRef를 사용해 위치를 직접 업데이트하려고 했습니다. {/* 내용 */} 문제점:기존.. 2025. 3. 14. [React] Material-UI Popover에서 Popper로 전환한 시행착오 1. 배경 및 요구사항프로젝트에서는 Popover를 사용하여 특정 UI를 구현하고자 하였다. 그러나 팝오버가 열려 있는 동안에도 배경 요소와 상호작용할 수 있도록 하려는 요구사항이 존재하였다.2. 초기 시도: Popover의 ModalProps 활용Material-UI Popover는 내부적으로 Modal을 사용하여 포커스를 팝오버 내부로 강제하는 특성을 지니고 있다. 이에 ModalProps를 이용하여 백드롭 숨김, 스크롤 잠금 해제, 포커스 강제 해제를 시도하였다. 아래 코드는 그 예이다. {/* Popover 내용 */}그러나 이 방법을 사용하면 TypeScript 에러가 발생하였다.오류 메시지는 다음과 같다.Property 'ModalProps' does not exist on type 'Int.. 2025. 3. 14. [React] React Query 사용법 | 데이터 캐싱과 리페칭 쉽게 정리 React Query란?React Query는 React 애플리케이션에서 서버 상태(데이터)를 효율적으로 관리하기 위한 데이터 패칭 라이브러리이다. API로부터 데이터를 가져오고, 캐싱하고, 업데이트하며, 동기화하는 작업을 간편하게 만들어 준다. 서버와 클라이언트 간의 데이터 통신을 효율적으로 관리하여 사용자 경험을 개선할 수 있다.✅ React Query, 왜 사용해야 할까?자동 캐싱과 데이터 동기화데이터를 자동으로 캐싱하고, 필요한 경우에만 서버로부터 데이터를 다시 가져온다.백그라운드에서 데이터를 자동으로 동기화하여 최신 상태를 유지할 수 있다.서버 상태 관리 간소화API 호출, 로딩 상태, 에러 처리 등을 직접 관리할 필요 없이 간편하게 처리할 수 있다.편리한 리페칭(Refetching)특정 조건(.. 2025. 3. 14. [React] React와 TypeScript로 구현하는 다양한 텍스트 들여쓰기 기법 이번 포스팅에서는 React 컴포넌트를 활용하여 텍스트 들여쓰기 효과를 다양하게 구현하는 방법을 소개합니다.특히, 첫 번째 줄은 18px, 두 번째 줄부터는 36px 들여쓰기가 적용되는 "indentDouble" 타입을 포함한 여러 타입의 구현 예제를 제공하여, UI의 가독성을 높이는 데 도움이 될 것입니다.import React from 'react';import { Box, Typography } from '@material-ui/core';interface FaqAnswer { type: 'br' | 'indent' | 'indentAll' | 'indentDouble' | string; text: string;}// 다중 텍스트 들여쓰기 구현 함수const generateAnswer = (co.. 2025. 2. 11. [React] React 프로젝트마다 다른 버전 설치해도 괜찮을까? 완벽 정리 📌 React 프로젝트마다 다른 버전 설치해도 괜찮을까?React 프로젝트를 여러 개 작업하다 보면 각 프로젝트에서 다른 React 버전을 사용해야 할 때가 있습니다.그런데, 한 폴더에서 React 17을 쓰고, 다른 폴더에서 React 18을 설치해도 괜찮을까요?결론부터 말하면, 각 프로젝트 폴더마다 React 버전을 다르게 설치해도 문제가 없습니다.✅ React 프로젝트별 버전이 충돌하지 않는 이유각 프로젝트는 독립적인 패키지 환경을 가짐다른 프로젝트의 node_modules/ 폴더와 충돌하지 않음package.json과 package-lock.json을 기반으로 버전이 고정됨🔹 현재 프로젝트에서 사용 중인 React 버전 확인하기터미널에서 해당 프로젝트 폴더로 이동 후 아래 명령어를 실행하세요... 2025. 2. 6. 이전 1 2 3 다음 728x90
