CoKo

ref 콜백 함수 전달로 인한 무한 리렌더링 이슈 해결

문제 상황

reference image — 팝업 컴포넌트 마운트 시 무한 리렌더링 발생

DOM rect 정보를 전역 상태로 저장하기 위해 콜백 ref로 DOM 노드에 접근해야 했습니다. 하지만 특정 팝업 컴포넌트가 마운트되면 무한 리렌더링이 발생하여 브라우저가 프리징되는 현상이 있었습니다.

원인 파악

React의 ref 콜백은 렌더링마다 새로운 함수 참조가 전달되면 다시 실행됩니다. ref 실행 → 상태 변경 → 리렌더링 → ref 재실행의 무한 루프가 원인이었습니다.

해결 과정

결과 요약

useCallback을 활용한 ref 참조 안정화 및 브라우저 프리징 문제 제거

퀴즈 데이터 유실 방지

문제 상황

퀴즈 풀이 도중 실수로 새로고침이나 뒤로가기를 눌렀을 때, 전역 상태가 초기화되어 진행 상황이 모두 날아가는 문제가 있었습니다.

해결 과정

복잡한 복구 로직 대신, 브라우저의 beforeunload 이벤트를 활용해 실수를 방지하는 것이 MVP 단계에서 가장 효율적인 해결책이라 판단했습니다.

useEffect(() => {
  if (!enabled) return;

  window.addEventListener("beforeunload", handleBeforeUnload);

  return () => {
    window.removeEventListener("beforeunload", handleBeforeUnload);
  };
}, [enabled, handleBeforeUnload]);

결과 요약

실수로 인한 퀴즈 데이터 유실 방지 및 사용자 경험 향상

내가 맡은 일

퀴즈 유형과 학습 진행 화면 구현

학습 중 이탈 확인 흐름 추가

콘텐츠와 상점 아이템 운영 화면 구현

구현하며 확인한 문제

문제 상황

원인 파악

해결 과정

결과 요약

문제 상황

해결 과정

결과 요약