728x90 useEffect3 [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. [React] Context Provider, useEffect, useMemo React에서 context provider, useEffect, 그리고 useMemo는 모두 중요한 개념이며 React 애플리케이션을 개발할 때 자주 사용됩니다. 각각의 역할과 사용법에 대해 자세히 설명하겠습니다.Context Provider:역할: Context Provider는 React 컴포넌트 트리 전체에서 데이터를 공유하는 데 사용됩니다. 주로 전역 상태 관리에 활용됩니다.사용법: Context를 생성하고, 해당 컨텍스트의 공급자(Provider)를 사용하여 컴포넌트 트리에 값을 제공합니다. 컴포넌트에서는 해당 컨텍스트의 값을 소비(consume)할 수 있습니다.// 예시: 컨텍스트 생성const MyContext = React.createContext();// 예시: 컨텍스트 공급자 사용fu.. 2025. 2. 5. [React] useLayoutEffect vs useEffect: 언제, 왜 사용하는가? React에서 useEffect와 useLayoutEffect는 비슷해 보이지만 동작 방식에서 중요한 차이가 있음이 차이를 이해하면 UI가 깜빡이는 문제(Flickering) 등을 방지 가능1. 기본 개념 정리 ▶ useEffect비동기적으로 실행됨 (렌더링 후 실행됨)화면이 먼저 업데이트된 후에 실행됨사용자에게 먼저 UI가 보이고 그 후에 실행되는 효과를 적용할 때 사용 ▶ useLayoutEffect동기적으로 실행됨 (렌더링 직후, 화면이 그려지기 전에 실행됨)DOM 업데이트가 적용되기 전에 실행됨UI가 깜빡이는 것을 방지하고 레이아웃이 변경되기 전에 실행해야 할 경우 사용2. 실행 순서 차이 ▶ useEffect 실행 순서컴포넌트가 렌더링됨브라우저가 화면을 업데이트함useEffect 실행됨impor.. 2025. 2. 5. 이전 1 다음 728x90
