Skip to content

0.0.6 업데이트

Overview

  • Type-Safe 네비게이션을 적용했어요.
  • 404.tsx 파일이 _404.tsx로 이름이 변경됐어요.
  • 쿼리 파라미터 사용법이 변경됐어요.
    • useQueryParams, useQueryParam이 제거됐고, Route.useParams가 새로 추가됐어요.
  • 타입 불러오기 관련 문제를 해결했어요.
    • NetworkStatus, ColorPreference, HapticFeedbackOptions 타입을 가져올 수 있게 됐어요.
    • @react-native-bedrock/native에서 타입을 못 가져오는 문제가 해결됐어요.

Breaking Changes

Type-Safe 네비게이션 적용

Type-Safe는 코드에서 데이터 타입을 명확히 정의하고, 잘못된 타입 사용을 방지하는 상태를 말해요. 이를 통해 작성 시점에 에러를 빠르게 발견하고 런타임 에러를 줄일 수 있어요.

예를 들어, 라우트 파라미터의 타입을 명시적으로 정의하면, 잘못된 파라미터 사용이나 데이터 타입 오류를 코드 작성 시점에 방지할 수 있어요. 이를 통해 잘못된 데이터 전달을 사전에 차단할 수 있어요.

이처럼 Type-Safe 네비게이션은 코드 작성의 안전성을 높이고, 에러로 인한 디버깅 시간을 줄이는 데 큰 도움이 돼요.

마이그레이션 가이드를 참고해 주세요.

파일 이름 변경

베드락(Bedrock)에서는 특정 파일 이름에 _를 추가하면 해당 파일에 특별한 동작을 적용해요. 예를 들어, 404.tsx라는 파일 이름을 _404.tsx로 변경하면, 이는 베드락에서 지원하는 특정 기능을 활성화하는 규칙이에요.

마이그레이션 가이드를 참고해 주세요.

변경 예시

  • 기존 파일: 404.tsx
  • 변경 후: _404.tsx

파일 이름에 _를 추가함으로써, 이 파일이 베드락의 특별한 처리 규칙을 따르도록 설정돼요. 이는 주로 커스텀 에러 페이지와 같은 기능에서 사용돼요.

쿼리 파라미터 사용법 변경

  • 기존 useQueryParams, useQueryParam은 제거됐어요.
  • 새로 추가된 Route.useParams를 사용해야 해요.

마이그레이션 가이드

1. 404 페이지 업데이트 (필수)

404.tsx 파일의 이름을 _404.tsx로 변경하세요.

diff
- 404.tsx
+ _404.tsx

2. 페이지 컴포넌트 마이그레이션 (선택)

pages 하위 컴포넌트를 아래와 같이 수정하세요.

변경 전:

tsx
export { default } from "../src/pages/ExamplePage";

변경 후:

tsx
import ExamplePage from "../src/pages/ExamplePage";
import { BedrockRoute } from "react-native-bedrock";

export const ExampleRoute = BedrockRoute("/example", {
  component: ExamplePage,
});

경로 규칙

파일 경로URL 경로
pages/index.tsx/
pages/about.tsx/about
pages/test/index.tsx/test
pages/test/about.tsx/test/about

3. 쿼리 파라미터 사용법 업데이트 (필수)

useQueryParams 대신 useParams를 사용하세요.

변경 전:

tsx
import { useQueryParams } from "react-native-bedrock";

function Component() {
  const params = useQueryParams();
  // 기존 코드
}

변경 후:

tsx
import { useParams } from "react-native-bedrock";

// 페이지 컴포넌트 마이그레이션 완료 후
const params = useParams({
  from: "/example-path", // 예: '/about'
});

// 페이지 컴포넌트 마이그레이션을 완료하지 않은 경우
const params = useParams({ strict: false });