1. Cleanup 함수의 기본 역할React를 다루다 보면 useEffect 내부에 return으로 전달하는 cleanup 함수(clean-up function)를 자주 보게 된다. cleanup 함수는 컴포넌트가 언마운트되거나, 의존성 배열(dependency array)에 변화가 생길 때 이전 이펙트를 정리하기 위해 동작한다. 이를 통해 메모리 누수나 불필요한 이벤트 리스너 잔존 문제를 방지한다.useEffect(() => { const id = setInterval(() => { console.log('tick'); }, 1000); // cleanup 함수 return () => { clearInterval(id); console.log('cleanup!'); };}, ..

React에는 useMemo, useCallback, React.memo, useRef, useTransition 등 다양한 메모이제이션 훅이 존재한다.하지만 이 훅들은 “성능을 무조건 좋게 하는 마법 도구”가 아니라, 비용이 있는 캐싱 메커니즘이다. 즉, 잘못 쓰면 오히려 성능과 가독성, 유지보수성을 모두 해치는 결과를 초래한다. 이 글에서는 React의 주요 메모이제이션 훅들을 비교하고, “언제 써야 하는지, 왜 남용하면 느려지는지”를 정리해본다. 1. 메모이제이션의 본질Memoization = 캐싱(Caching) + 의존성 추적React의 메모이제이션 훅은 이전 렌더 결과(값, 함수, UI)를 저장해두었다가 의존성이 바뀌지 않으면 재계산을 생략한다.즉, 성능 향상의 핵심은 “불필요한 연산을 줄이는..

React 를 이용한 웹 개발에서 성능 최적화와 관련해 가장 많이 언급되는 개념 중 하나가 바로 Virtual DOM이다. React를 비롯한 현대 프론트엔드 라이브러리는 이 개념을 활용해 효율적인 렌더링을 구현한다. 1. Virtual DOM이란?실제 DOM과 달리 Virtual DOM은 메모리 상에 존재하는 가벼운 자바스크립트 객체 사본으로, 상태(state)나 속성(props)이 바뀌면 실제 DOM을 직접 수정하지 않고 먼저 Virtual DOM을 갱신한다. 그 후 이전 Virtual DOM과 비교(diffing)하여 최소한의 변경만 실제 DOM에 반영하는 과정을 중재(또는 조정. Reconciliation)이라고 부른다. 2. Virtual DOM의 작동 원리1. 컴포넌트 상태 변경 → Virtu..