React Native 트러블슈팅: API 응답 코드와 상태 관리 디버깅

들어가며

React Native 개발 중 흔히 마주치는 문제 중 하나는 API 응답 후 화면이 갱신되지 않는 현상입니다.
최근 매치 삭제 기능 구현 중 겪은 문제와 해결 과정을 공유하고자 합니다.

문제 상황

1. 매치 삭제 API 호출은 성공
2. 삭제 후 알림은 표시되지 않음
3. 매치 목록이 갱신되지 않음

디버깅 과정

1. 초기 코드

const handleDelete = async (matchId: number) => {
  try {
    const response = await axiosInstance.delete(`/matches/${matchId}`);
    if (response.status === 200) { // 문제의 지점
      Alert.alert("성공", "매치가 삭제되었습니다");
      await loadParticipations();
      onUpdate?.();
    }
  } catch (error) {
    Alert.alert("오류", "매치 삭제 중 오류가 발생했습니다");
  }
};

2. 디버깅을 위한 로그 추가

const handleDelete = async (matchId: number) => {
  console.log("삭제 버튼 클릭됨, matchId:", matchId);  // 단계별 로그 추가
  try {
    Alert.alert("매치 삭제", "정말로 이 매치를 삭제하시겠습니까?", [
      {
        text: "삭제",
        onPress: async () => {
          console.log("삭제 확인 버튼 클릭됨");
          const response = await axiosInstance.delete(`/matches/${matchId}`);
          console.log("삭제 API 응답:", response.status);
          // ...
        }
      }
    ]);
  } catch (error) {
    console.error("에러 발생:", error);
  }
};

3. 로그 분석 결과

삭제 버튼 클릭됨, matchId: 34
삭제 확인 버튼 클릭됨
삭제 API 응답: 204

4. 문제 발견

• API가 204(No Content) 응답을 반환
• 코드는 200 응답만 처리하도록 작성됨
• 204는 성공이지만 처리되지 않음

5. 해결 코드

if (response.status === 200 || response.status === 204) {
  Alert.alert("성공", "매치가 삭제되었습니다");
  await loadParticipations();
  onUpdate?.();
}

디버깅 팁

1. 단계별 로그 추가

   • 각 주요 단계마다 console.log 추가
   • 실행 흐름 추적
   • 변수값 변화 관찰

2. API 응답 검사

   • 상태 코드 확인 (200, 204 등)
   • 응답 데이터 구조 확인
   • 에러 응답 형식 확인

3. 비동기 처리 확인

   • async/await 사용 위치 확인
   • Promise 체인 순서 검토
   • 비동기 함수 호출 순서 확인

4. 상태 업데이트 확인

   • setState 호출 시점 확인
   • useEffect 의존성 배열 검토
   • props 전달 경로 확인

5. 개발자 도구 활용

   • React Native Debugger 사용
   • Network 탭에서 API 통신 확인
   • Console 탭에서 로그 확인

결론

API 응답 처리 시에는 가능한 모든 성공 케이스(200, 201, 204 등)를 고려해야 합니다.
또한, 문제 해결을 위해서는 체계적인 로깅과 단계별 디버깅이 필수적입니다.