React Native와 웹 공존의 또 다른 접근법 (Part 2) 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

React Native 및 웹 앱 개발자, TypeScript를 활용한 타입 안전성 관리가 필요한 중급 이상 개발자

핵심 요약

• 메서드별 관리를 통해 onMessage의 복잡한 로직을 분리하고, Promise 구조로 단일 방향 통신 문제를 해결
• 타입 인페런스(type inference)를 활용해 typeof 및 generic으로 타입 정의 없이 자동으로 타입을 추론
• Tanstack Query의 useQuery는 인풋 기반으로 타입을 완성, 타입 안전성과 개발자 경험 향상

섹션별 세부 요약

1. 실무 사례 해결 및 오류 처리

• WebView에서 제품 클릭 시 Native 화면 또는 기존 웹 화면으로 이동하는 요구사항을 처리
• navigate 함수를 throwOnError에 배치, 오류 발생 시 catch 블록을 통해 통합 오류 처리
• 기존 기능에 대한 failover 전략으로 legacy 페이지 이동 가능
• 타입 안전성(Type Safety) 문제에 대한 실무 적용 사례 설명

2. 타입 불일치 문제와 해결 방안

• 프론트엔드와 백엔드가 독립적으로 존재할 때 발생하는 타입 불일치(type mismatch)
• 예시 코드: edges 배열의 id 값이 null일 경우 렌더링 오류 발생, 옵셔널 체이닝(optional chaining)으로 해결
• Swagger 및 GraphQL 도구를 활용한 타입 정의 자동화, 하지만 인간 오류로 인한 타입 불일치 가능성 존재

3. 타입 인페런스를 통한 타입 안전성 구현

• bridge에서 typeof를 활용해 타입 자동 추론
• keyof 키워드로 타입 유무 확인, 제네릭(generic)을 사용해 객체 타입 검증
• linkBridge에 타입 제네릭(generic) 적용, 자동으로 타입 완성
• openInAppBrowser와 같은 메서드의 존재 여부를 추론해 추천 항목으로 표시

4. Tanstack Query의 타입 인페런스 활용

• useQuery 함수의 반환 값을 기반으로 타입 완성
• 사용자에게는 JavaScript처럼 보이지만 타입 안전성(type safety) 유지
• 라이브러리(library)가 타입 정의 책임을 지도록 강조, 개발자 부담 감소

결론

• 타입 정의를 수동으로 하지 않고 타입 인페런스(type inference)를 활용해 타입 안전성과 개발자 경험(DX) 향상
• typeof, generic, keyof 등의 TypeScript 기능을 통해 자동 타입 추론 가능
• Tanstack Query와 같은 도구를 활용해 타입 안전성(type safety)을 확보할 수 있음