Haeyul Blog

RN 수업 2차시 New Architecture & Expo Router

4 min read

1. New Architecture

1-1. 왜 등장 했는가?

Bridge

Java Script != Native 서로의 언어를 못 알아들음!

→ 이런 문제가 발생하므로, 중간에 interpreting해주는 도구가 필요함

  1. JS Thread가 요청을 직려화
  2. Bridge가 역직렬화함 (Queue에 저장 → 비동기적으로 전달)
  3. Shadow Thread가 번역된 스타일 정보를 넘겨 받음.

JSI

직통 전화와 같이 작업한다.

  • Js Thread → JavaScript Interface → Native (UI Thread)

Note

JSI는 cpp로 작성된 크로스 플랫폼 어딘가와 통신한다.

Bridge 병목

JSThread에서 여러 개의 요청을 보내면 Native Bridge가 다 받아들이지 못하고 오류가 난다.

JSI를 거쳐간 Task에는 대해 블로킹이 발생할 가능성이 있지 않는가?

  • Native Bridge 비동기 큐 덕분에 Native가 아무리 느려도 JS Thread가 계속 실행될 수 있음

  • New Architecture 방식 무거운 작업이 동시에 나올 경우 멈출 위험이 있음. (native bridge와 다르게 queue와 같은 알고리즘을 사용하지 않아서, 무거운 작업이 실행되면 다른 작업에 자원을 나눠줄 수 없는 상황이 만들어질 수 있음.)

Expo와 New Architecture

  • Expo SDK 55 이상은 기본적으로 New Architecture를 적용하는 것이 강제화됨!

Note

단, 이전 버전은 설정 파일 (app.json)에서 newArchEnabled 값 설정으로 끌 수 있음.

newArchEnabled" : ture

Stack

  • 순서가 있는 흐름
<Stack.Screen />

Tab

  • 동등한 주요 화면 구분
<Tabs.Screen />

Drawer

  • 탭에 다 담기 어려운 구조
<Drawer.Screen />

2. Expo Router

2-1. Expo Router vs React Nativation

2-2. Expo Router 파일 기반 라우팅

  • index.tsx :
  • home.tsx, profile.tsx :
  • [id].tsx :

2-3. Stack Natigator

앱 시작될 때의 진입점에 해당하는 지점.

Push

router.push(href)

router.push('/Comment')

Warning

push를 반복하면 Stack이 쌓이면서 메모리 낭비로 이어질 수 있다.

Dismiss

router.dismiss(count)

router.dismiss(2)

Replace

router.replace(href)

router.replace('/Profile')

Note

로그인 완료 후 없어진 LoginScreen 히스토리 없애는 용도로 많이 상용됨.

Back

router.back() / pop()

router.back()

useLocalSearchParams

Warning

URL 기반 값이므로 숫자도 문자로됨

3. Deep Link

Deep Link란?

알림창에서 알림과 관련된 페이지로 바로 이동하게 되는데 사용하는 기술

Note

Expo Go 환경에서 제한이 있을 수 있음.

Custom Scheme

앱만 이해하는 URL을 활용하여 앱의 화면을 이동하는 기술

myapp://profile/1
  • 장점
    • 설정이 간단
    • 빠른 테스트가 가능
  • 단점
    • 앱이 없으면 동작하지 않음
    • 보안 취약점이 존재함(hijack 공격)

Note

hijack 공격이란?

import { View, Text, Button } from "react-native";
import { Link } from "expo-router";
 
export default function Home() {
  return (
    <View>
      <Text>Home</Text>
      <Link href="/profile/1" asChild>
        <Button title="Go Profile" />
      </Link>
    </View>
  );
}
import { useLocalSearchParams } from "expo-router";
import { View, Text } from "react-native";
 
export default function Profile() {
  const { id } = useLocalSearchParams();
 
  return (
    <View>
      <Text>Profile ID: {id}</Text>
    </View>
  );
}

웹 링크인데 앱에서 접근 가능하게 하여 화면 이동하는 기술

https://myapp.com/profile/1
  • 장점
    • 앱이 없어도 웹으로 fallback 가능
  • 단점
    • 설정이 복잡
    • 추가 서버 필요

Expo Router 설정

4. 실습

Graph View