trouble shooting - 가안

트러블 슈팅: React 무한 렌더링 문제
�� 문제 상황
VctPsncdsDtl.tsx 컴포넌트에서 무한 렌더링 발생
브라우저 성능 저하 및 메모리 누수 위험
조직명 변환 기능 구현 중 발생
�� 원인 분석
1. 객체 리터럴의 매번 재생성

// ❌ 문제 코드
const masterUI = {
    grid_info: [{ type: 'OGNZ_COM' }],
};

JavaScript에서 {} 객체 리터럴은 매번 새로운 객체 생성
useMasterUIHandler의 useEffect 의존성 배열에 masterUI 포함
객체 참조가 계속 변경되어 useEffect 무한 실행
2. 함수의 매번 재생성

// ❌ 문제 코드
const getOrganizationName = (orgCode: string | undefined): string => {
    // 함수 내용...
};

화살표 함수도 매번 새로운 함수 생성
JSX에서 함수 참조 시 React가 "변경됨"으로 인식
불필요한 리렌더링 유발
🛠️ 해결 과정
1단계: useMemo로 객체 메모이제이션

// ✅ 해결
const masterUI = useMemo(() => ({
    grid_info: [{ type: 'OGNZ_COM' }],
}), []); // 빈 의존성 배열로 한 번만 생성

2단계: useCallback으로 함수 메모이제이션

// ✅ 해결
const getOrganizationName = useCallback((orgCode: string | undefined): string => {
    if (!orgCode || !ognzComData || !Array.isArray(ognzComData)) return orgCode || '';
    
    const foundOrg = ognzComData.find((org: unknown) => 
        (org as Record<string, unknown>).child_no === orgCode
    );
    return foundOrg ? ((foundOrg as Record<string, unknown>).ognz_nm as string) : orgCode;
}, [ognzComData]); // ognzComData 변경 시에만 재생성

3단계: import 추가

import { useMemo, useCallback } from 'react';

📋 해결 결과
Before (문제 상황)
컴포넌트가 무한 렌더링
브라우저 성능 저하
메모리 사용량 증가
After (해결 후)
정상적인 렌더링 사이클
성능 최적화 완료
조직명 변환 기능 정상 작동
🎯 핵심 학습 포인트
JavaScript 참조 비교: {}는 항상 새로운 객체
React 최적화: 같은 참조면 변경되지 않았다고 판단
메모이제이션 활용: useMemo, useCallback으로 불필요한 재생성 방지
의존성 배열 관리: 언제 재생성할지 명확히 제어
🔧 예방 방법
객체/함수 생성 시 메모이제이션 고려
useEffect 의존성 배열 주의 깊게 관리
컴포넌트 리렌더링 원인 분석 습관화
React DevTools Profiler 활용
�� 체크리스트
[ ] 객체 리터럴은 useMemo로 메모이제이션
[ ] 함수는 useCallback으로 메모이제이션
[ ] useEffect 의존성 배열 검토
[ ] 불필요한 리렌더링 원인 제거
[ ] 성능 최적화 완료 확인