디버깅 및 문제 해결

이 가이드는 React Compiler를 사용할 때 발생하는 문제를 식별하고 수정하는 데 도움을 줍니다. 컴파일 문제를 디버깅하고 일반적인 문제를 해결하는 방법을 배우게 됩니다.

컴파일러 동작 이해하기

React Compiler는 React의 규칙을 따르는 코드를 처리하도록 설계되었습니다. 이러한 규칙을 위반할 수 있는 코드를 발견하면, 앱의 동작을 변경할 위험을 감수하기보다 안전하게 최적화를 건너뜁니다.

컴파일러 오류 vs 런타임 문제

컴파일러 오류는 빌드 시점에 발생하며 코드 컴파일을 방해합니다. 컴파일러는 실패하기보다 문제가 있는 코드를 건너뛰도록 설계되어 있기 때문에 이러한 오류는 드뭅니다.

런타임 문제는 컴파일된 코드가 예상과 다르게 동작할 때 발생합니다. React Compiler로 문제를 겪는 대부분의 경우는 런타임 문제입니다. 이는 일반적으로 코드가 컴파일러가 감지하지 못하는 미묘한 방식으로 React의 규칙을 위반하고, 컴파일러가 건너뛰어야 할 컴포넌트를 실수로 컴파일했을 때 발생합니다.

런타임 문제를 디버깅할 때는, 영향을 받는 컴포넌트에서 ESLint 규칙이 감지하지 못한 React 규칙 위반을 찾는 데 집중하세요. 컴파일러는 코드가 이러한 규칙을 따르는 것에 의존하며, 컴파일러가 감지할 수 없는 방식으로 규칙이 깨질 때 런타임 문제가 발생합니다.

일반적인 문제 패턴

React Compiler가 앱을 망가뜨릴 수 있는 주요한 방법 중 하나는 코드가 정확성을 위해 메모이제이션에 의존하도록 작성된 경우입니다. 이는 앱이 제대로 작동하기 위해 특정 값이 메모이제이션되는 것에 의존한다는 의미입니다. 컴파일러가 수동 접근 방식과 다르게 메모이제이션할 수 있으므로, 이는 이펙트의 과도한 실행, 무한 루프 또는 업데이트 누락과 같은 예상치 못한 동작으로 이어질 수 있습니다.

이러한 상황이 발생하는 일반적인 시나리오:

• 참조 동등성에 의존하는 이펙트- 이펙트가 객체나 배열이 렌더링 간에 동일한 참조를 유지하는 것에 의존할 때
• 안정적인 참조가 필요한 의존성 배열- 불안정한 의존성으로 인해 이펙트가 너무 자주 실행되거나 무한 루프를 생성할 때
• 참조 검사를 기반으로 한 조건부 로직- 코드가 캐싱이나 최적화를 위해 참조 동등성 검사를 사용할 때

디버깅 워크플로

문제가 발생했을 때 다음 단계를 따르세요:

컴파일러 빌드 오류

예상치 못하게 빌드를 중단시키는 컴파일러 오류가 발생하면, 이는 컴파일러의 버그일 가능성이 높습니다. 다음 정보와 함께facebook/react저장소에 보고하세요:

• 오류 메시지
• 오류를 발생시킨 코드
• 사용 중인 React 및 컴파일러 버전

런타임 문제

런타임 동작 문제의 경우:

1. 컴파일을 일시적으로 비활성화하기

문제가 컴파일러와 관련된 것인지 확인하려면"use no memo"를 사용하세요:

문제가 사라지면, 이는 React 규칙 위반과 관련이 있을 가능성이 높습니다.

문제가 있는 컴포넌트에서 수동 메모이제이션(useMemo, useCallback, memo)을 제거하여 앱이 메모이제이션 없이도 올바르게 작동하는지 확인할 수도 있습니다. 모든 메모이제이션이 제거된 후에도 버그가 계속 발생하면, 수정해야 할 React 규칙 위반이 있는 것입니다.

2. 단계별로 문제 수정하기

1. 근본 원인 식별하기 (종종 정확성을 위한 메모이제이션)
2. 각 수정 후 테스트하기
3. 수정 후"use no memo"제거하기
4. 컴포넌트가 React DevTools에서 ✨ 배지를 표시하는지 확인하기

컴파일러 버그 보고하기

컴파일러 버그를 발견했다고 생각되면:

1. React 규칙 위반이 아닌지 확인- ESLint로 확인
2. 최소 재현 사례 만들기- 작은 예제로 문제 격리
3. 컴파일러 없이 테스트- 컴파일 시에만 문제가 발생하는지 확인
4. 이슈 제출하기:
   • React 및 컴파일러 버전
   • 최소 재현 코드
   • 예상 동작 vs 실제 동작
   • 오류 메시지

다음 단계

• 문제를 방지하려면React 규칙 검토
• 점진적 적용 전략은점진적 적용 가이드 확인