1. 개요
DoEatFit 서비스의 프론트엔드 환경에서 차세대 **리액트 컴파일러(React Compiler)**를 전격 도입하면서 마주친 엄격한 정적 분석 규칙들을 정밀하게 준수하고, 프로덕션 빌드의 안정성과 실제 최종 사용자 경험(UX)을 극대화하기 위해 수행한 리팩토링 및 CI/CD 빌드 최적화 이행 성과를 친절히 기록하고 있습니다.
2. 핵심 내용
2-1. 객체 참조 비교의 늪과 고유 원시 값(Primitive) 기반 비교 전환
- 문제 상황:
homeContentDetail,userInfo등 다양한 복합 정보가 얽힌 객체 형태의 상태값들을 자식 컴포넌트 렌더링 분기 시 단순히 참조형 비교 연산자(!==)로 감지하도록 구현되어 있었습니다. 이로 인해 부모 컴포넌트가 무의미하게 리렌더링될 때마다 새로운 객체가 힙 메모리에 할당되면서 하위의 폼(Form) 상태가 뜬금없이 리셋되어 버리는 렌더링 사이클 결함이 발견되었습니다. - 원인 분석: 자바스크립트는 객체의 속성 값이 완전히 같더라도 참조 주소가 다르면 서로 다른 객체로 식별합니다. 리액트 컴파일러(React Compiler)는 이러한 불완전한 참조 비교 코드를 매우 엄격하게 리포팅하며 메모이제이션 신뢰성을 훼손하는 코드로 판별하였습니다.
- 해결 방안: CMS 홈 콘텐츠 수정 기능, 내 정보 상세 페이지, 식단 계산기 등 상태 무결성이 절대적으로 사수되어야 하는 모든 입력 폼의 트리거 조건을 객체 참조 주소 비교 대신 **
uuid나email과 같이 고유한 원시 값(Primitive Value)**을 기준으로 크로스 체크하도록 로직을 일괄 마이그레이션했습니다. 이를 통해 참조 주소 흔들림에 따른 예기치 않은 데이터 초기화와 하이드레이션 경고를 원천 차단했습니다.
2-2. 렌더링 병목 해소와 입력 폼 데이터 무결성 개선 (UX)
- 비동기 틱 제거: 기존
AuthProvider및useAxiosInterceptor구조에서 Next.js의 하이드레이션 불일치 에러를 꼼수로 모면하기 위해 코드 곳곳에 흩어져 있던requestAnimationFrame지연 유틸들을 과감히 걷어냈습니다. 초기 마운트 시 불필요한 프레임 틱 딜레이가 소멸하면서 유저가 사이트에 진입할 때 느껴지는 초기 로딩 퍼포먼스가 눈에 띄게 민첩해졌습니다. - 식단 영양소 입력 UX 최적화: 기존에는 유저가 식단 영양 성분 입력 창에서 수치를 지울 때
Number(value) || 0처리 방식 탓에, 숫자를 모두 백스페이스로 밀면 인풋에 강제적으로0이 기입되어 연타 입력을 방해하는 불쾌한 UX가 존재했습니다.- 개선책:
FoodState인터페이스를 수정하여 각 숫자 데이터 필드에string | number타입을 동시에 수용하도록 유연화했습니다. 이로써 유저가 타이핑하는 도중에는 빈 문자열("") 상태가 아름답게 유지되도록 보장하고, 최종 저장 요청을 쏘는 비즈니스 레이어(handleSave) 직전에만 일괄Number()형변환을 적용함으로써 UX 고도화와 백엔드 데이터 무결성을 두 마리 토끼 모두 놓치지 않고 해결했습니다.
- 개선책:
2-3. 최종 프로덕션 빌드 통과 성과 및 추천 라이브러리 검토
모든 린트 에러(React Compiler 룰셋 포함) 및 TS 타입 에러를 명쾌하게 해소함으로써 배포 파이프라인에서 빌드 이그짓 코드 0(성공)을 마침내 기록하였습니다. 빌드를 불안정하게 만들던 경고들이 완전히 종결되면서 프로덕션 배포 신뢰성이 단단히 굳어졌습니다.
- 추천 오픈소스 라이브러리:
eslint-plugin-react-compiler: 리액트 팀에서 제공하는 공식 컴파일러 전용 ESLint 플러그인입니다. 컴파일러가 최적의 성능을 낼 수 없도록 방해하는 나쁜 안티 패턴(예컨대 Effect 내부의 억지스러운 섀도 상태 변경 등)을 빌드 이전에 완벽하게 포착하고 교정할 수 있게 도와주므로, 리액트 19 도입 시 반드시 연동할 것을 강력 추천해 드립니다.Zod: 클라이언트에서 서버로 넘어가기 직전의 폼 데이터나 다양한 상태의 타입 스키마 무결성을 런타임에서 안전하게 파싱 및 검증해주는 모던 스키마 검증 라이브러리입니다. 앞에서 고민한 숫자 및 문자 유연 변환과 같은 까다로운 클라이언트 인풋 유효성 검사 로직을 체이닝 구조로 유려하게 대처하도록 도와줍니다.