웹 개발에서 파일 기반 라우팅을 활용하려면 프로젝트 디렉터리 내에 있는 특정 파일과 통일된 리소스 로케이터(URL) 경로를 연결해야 합니다. 이 방법을 구현하면 복잡한 탐색 체계의 생성을 피할 수 있습니다.
엑스포 라우터 라이브러리의 공개를 통해 파일 기반 라우팅을 React Native 애플리케이션 내에서 활용할 수 있게 되었습니다. 이 개발은
엑스포 라우터로 재창조된 내비게이션
엑스포 라우터는 리액트 네이티브 엑스포로 개발된 애플리케이션을 위한 선언적 라우팅 솔루션을 제공하며, 이는 리액트 내비게이션을 활용하여 내비게이션 시스템을 구축하는 기존의 접근 방식에서 벗어난 것입니다. 이를 통해 후자의 기능과 관련된 몇 가지 중요한 문제를 해결합니다.
개발자가 직면한 내비게이션 문제는 여러 환경에서 내비게이션 시스템의 일관되지 않은 기능, 딥 링크 관리와 관련된 복잡성, 사용자 정의 내비게이션 전환 구성과 관련된 복잡성 등 다면적이고 다양합니다.
파일 기반 내비게이션 및 라우팅을 활용하는 엑스포 라우터는 효율적으로 작동하는 간단한 플랫폼으로, 경로를 묘사할 수 있는 Next.js와 같은 자바스크립트 프레임워크와 자바스크립트 개발자 사이에서 널리 인정받고 있습니다.
엑스포 라우터 설치 및 설정
엑스포 프로젝트를 레거시 내비게이션 설정에서 엑스포 라우터 활용으로 전환하는 과정은 비교적 간단하고 복잡하지 않습니다.
1단계: 엑스포 라우터 설치
엑스포 라우터 설치 프로세스를 시작하려면 터미널에서 다음 명령을 실행하세요:
npx expo install expo-router
계속 진행하기 전에 필요한 피어 종속성을 설치하세요.
라이브러리 “react-native-safe-area-context”는 개발자를 위한 솔루션을 제공합니다
리액트 네이티브 스크린은 모바일 애플리케이션에서 사용자 인터페이스를 만들기 위한 강력하고 다재다능한 도구입니다. 이를 통해 개발자는 단일 코드베이스를 사용하여 iOS 및 Android 플랫폼용 화면을 쉽게 디자인, 빌드 및 테스트할 수 있습니다. 리액트 네이티브 스크린을 사용하면 아름답고 반응이 빠른 화면을 쉽게 만들 수 있으므로 모든 모바일 개발 프로젝트에 없어서는 안 될 필수 자산입니다.
엑스포 연계는 서로 다른 두 개의 전시회, 이벤트 또는 디스플레이를 연결하거나 연결하는 과정을 말합니다. 이는 물리적 설치, 디지털 플랫폼 또는 주제별 연결과 같은 다양한 방법을 통해 이루어질 수 있습니다. 그 목적은 맥락에 맞는 정보를 제공하고 개별 전시회 간의 유사점과 차이점을 강조함으로써 방문객에게 일관되고 통합된 경험을 제공하는 것입니다.
엑스포 상태 표시줄은 개발자에게 엑스포 애플리케이션을 관리하기 위한 직관적이고 사용자 친화적인 인터페이스를 제공하도록 설계된 고도로 발전되고 기능이 풍부한 도구입니다.
“react-native-gesture-handler” 패키지는 개발자가 제스처 인식 기능을 추가할 수 있는 도구입니다.
앞서 언급한 명령은 누락된 패키지를 쉽게 설치할 수 있도록 해줍니다. 이 작업을 수행하려면 다음 명령을 실행해야 합니다:
npx expo install <dependency-name>
2단계: 진입점 업데이트
App.js 대신 애플리케이션의 기본 진입점 역할을 할 index.js 파일을 생성하세요. 생성한 후에는 app.json 구성 파일에서 앱의 엔트리 포인트를 “index.js”로 업데이트해야 합니다. 이 단계는 애플리케이션을 실행할 때 React가 올바른 진입점을 찾아서 사용할 수 있도록 하기 때문에 매우 중요합니다.
// Set index.js as entry point
{
"main": "index.js"
}
// Import the following inside index.js
import "expo-router/entry";
3단계: 딥링킹 체계 정의
엑스포 라우터는 라우팅 시 어떤 디스플레이 또는 콘텐츠를 제공할지 결정하기 위해 딥링크 전략을 사용합니다.
애플리케이션의 기능을 다른 프로그램과 통합하는 메커니즘은 해당 파일 내에 특정 속성을 포함하는 app.json 파일에 링크 전략을 구현하여 설정할 수 있습니다.
{
"expo": {
"scheme": "myapp"
}
}
4단계: 최종 구성
엑스포 애플리케이션의 설정을 완료하려면 메트로 번들러를 설정하고 앱 내에서 엑스포 라우터를 수용할 수 있도록 바벨 구성을 조정해야 합니다.
객체에 새 키-값 쌍을 추가하려면 스프레드 연산자와 대괄호 표기법을 사용할 수 있습니다. 다음은 Babel 구성 파일을 업데이트하는 방법입니다: ”’자바스크립트 const { merge } = require(‘lodash’); module.exports = { presets: […require(‘./presets’).map(preset => ({ …preset, plugins: [ …require(‘./plugins’) .map(plugin => ({ …plugin, options: { …plugin.options } )) ] ]) ))] }; “` 여기서는 Lodash의 `merge` 함수를 사용하여 두 개의 객체 배열을 결합하고 있는데, 첫 번째 배열의 각 항목은
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
require.resolve("expo-router/babel"),
/* */
],
};
};
입니다. 이러한 캐주얼한 언어 사용은 자제해 주시기 바랍니다. 대신 다음과 같이 표현할 수 있습니다: “다음 명령을 실행하여 애플리케이션을 다시 시작하고 테스트를 다시 시작하세요:
나는 다양한 유형의 질문을 이해하고 응답할 수 있는 언어 모델입니다. 방대한 양의 데이터에 대한 훈련을 받았기 때문에 정확하고 유익한 답변을 제공할 수 있습니다.
npx expo --clear
“한 고양이 생물이 사용하도록 지정된 표면 위에 쉬고 있었습니다.
닫기
엑스포 라우터로 앱 경로 구축하기
애플리케이션 폴더 내 탐색 구조의 구현은 출발점 역할을 하는 index.js 파일로 시작됩니다. 엑스포 라우터는 ‘앱’ 디렉토리 내에서 생성된 모든 파일을 앱의 경로 시스템에 통합하여 각 페이지에 해당하는 딥링킹 기능이 있는 URL을 제공합니다.
iPad 애플리케이션이 제대로 작동하도록 하려면 메인 프로젝트 디렉터리 내에 ‘SecondScreen.js’라는 JavaScript 파일을 추가로 생성하고 이 파일에서 기본 컴포넌트를 내보내는 것이 좋습니다. 이 단계는 두 화면 간의 원활한 통합을 설정하고 원활한 사용자 경험을 보장하는 데 도움이 됩니다.
import { StyleSheet, Text, View } from "react-native";
import React from "react";
const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
</View>
</View>
);
};
export default SecondScreen;
const styles = StyleSheet.create({});
`index.js`의 `useRouter()` 함수를 사용하여 이 페이지로 이동할 수 있습니다.
import { useRouter } from "expo-router";
export default function Page() {
const navigation = useRouter();
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
<Text style={styles.subtitle}>This is the first page of your app.</Text>
<Button
title="Navigate to SecondScreen"
onPress={() => {
navigation.push("/SecondScreen");
}}
/>
</View>
);
}
앱의 내비게이터에서 원하는 목적지 화면의 상대 경로를 제공하는 `navigation.push()` 메서드를 사용하여 이 버튼의 경로를 지정하십시오. 예를 들어, 사용자를 “Second”라는 화면으로 안내하려면 `navigation.push(“/second”)`를 호출하면 됩니다.
SecondScreen 내의 인덱스 화면에 액세스하려면 다음 단계를 따르세요:
import { Link } from "expo-router";
const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
<Link href="/" asChild>
<TouchableOpacity>
<Text>Navigate to index.js</Text>
</TouchableOpacity>
</Link>
</View>
</View>
);
};
“링크” 요소에는 URL 경로를 나타내는 “href” 속성이 필요합니다. 애플리케이션 내에서 “/” 값은 일반적으로 “index.js” 파일에서 처리하는 기본 진입점을 나타냅니다. 또한 기본 구현을 사용하지 않고 필요한 모든 속성을 제공하여 ‘링크’ 컴포넌트의 사용자 지정 버전을 표시하는 데 ‘asChild’ 속성을 사용할 수 있습니다. 이 기능을 통해 개발자는 링크의 모양을 개인화하거나 고유한 라우팅 체계를 설정할 수 있습니다.
동적 경로 정의
동적 라우팅을 활용하면 지정된 변수 또는 정보에 따라 조건부 경로를 생성할 수 있습니다. 이 접근 방식을 사용하면 미리 정해진 경로 구성 집합을 고수하는 대신 애플리케이션의 탐색 구조 내에서 더 큰 다양성과 적응성을 확보할 수 있습니다.
엑스포 라우터 내에서 동적 경로를 활용하려면 가변 콘텐츠를 관리할 수 있는 경로를 정의해야 합니다. 이는 경로의 경로 내에 자리 표시자를 통합하여 레이블이 지정된 경로를 사용함으로써 달성할 수 있으며, 이후 경로를 통과하는 동안 해당 자리 표시자에 할당된 값에 액세스할 수 있어야 합니다.
별도의 블로그 게시물을 표시하는 것을 목적으로 하는 블로그 애플리케이션이 존재한다고 가정해 보겠습니다.이를 달성하기 위해 모든 게시물을 처리하는 동적 경로를 설정할 수 있습니다.
// app/routes/BlogPost.js
import React from "react";
import { useRouter } from "expo-router";
const BlogPost = ({ route }) => {
const { postId } = route.params;
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
앞서 언급한 인스턴스는 “BlogPost”라는 동적 경로 구성 요소의 구현을 보여 주며, “route.params” 객체를 사용하여 경로에 추가되는 매개변수 값을 추출할 수 있습니다. 특히 “postId” 매개변수에 액세스하여 연관된 블로그 게시물을 표시합니다.
동적 경로 생성
동적 경로가 설정되면 다양한 데이터 소스 또는 사용자 입력에 따라 즉석에서 추가 경로를 생성할 수 있습니다. 예를 들어, API에서 검색된 블로그 기사 모음이 있는 경우 각 개별 기사에 대해 동적 경로를 생성할 수 있습니다.
다음 구절은
// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";
const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
이 경우 반복 프로세스가 구현되어 블로그 게시물이 TouchableOpacity 컴포넌트를 사용하여 트래버스됩니다. 특정 항목을 클릭하면 탐색 경로 내의 매개변수로 postId를 활용하여 navigateToBlogPost 함수가 실행됩니다.
동적 경로 처리
동적으로 정의된 경로와 관련된 내비게이션 발생을 주의 깊게 모니터링하기 위해 “useFocusEffect” Hook을 활용할 수 있습니다.
사람이 운전을 잘할 수 있다고 해서 반드시 자신의 차량을 수리할 수 있는 것은 아닙니다.” ### 정교함: “자동차를 운전하는 데 능숙하지만 유지 및 보수에 대한 전문 지식이 없을 수 있습니다.
// app/routes/BlogPost.js
import React from "react";
import { Route, useFocusEffect } from "expo-router";
const BlogPost = ({ route }) => {
const { postId } = route.params;
useFocusEffect(() => {
// Fetch blog post data based on postId
// Perform any other necessary actions on focus
});
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
BlogPost 컴포넌트 내에서 useFocusEffect 훅을 활용하면 특별히 관련된 초점에 대한 관심을 유도할 수 있습니다. 제공된 콜백의 규정된 경계 내에서 정보 검색을 시작하거나, 조작을 수행하거나, 초점으로 지정된 블로그 게시물에 따라 시각적 프레젠테이션을 수정하도록 선택할 수 있습니다.
동적 경로로 탐색
동적으로 변경되는 경로에 도달하기 위해 엑스포 라우터에서 제공하는 탐색 도구를 활용할 수 있습니다.
특정 게시물 식별자를 가진 BlogPost 구성 요소에 도달하려면 탐색 개체 내에서 navigate.navigate() 메서드를 활용할 수 있습니다.
// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";
const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
블로그 글을 클릭하면 navigateToBlogPost 함수가 활성화되고 선택한 글의 특정 식별자를 매개변수로 받습니다.
엑스포 라우터는 네이티브 앱을 구성하는 데 도움을 줍니다
엑스포 라우터는 원활한 통합과 사용자 친화적인 기능을 통합한 혁신적인 디자인으로 경로 관리의 기존 방식을 활성화하여 React Native 애플리케이션 내에서 탐색하는 새로운 접근 방식을 제시합니다.
엑스포 라우터의 속성을 면밀히 검토하고 기본 원리를 심층적으로 조사한 결과, 이 도구를 사용하여 동적 성격의 탐색 경로를 구성하고 변동하는 정보 또는 사용자 입력을 관리하며 애플리케이션의 전반적인 탐색을 사용자 지정할 수 있다는 것이 관찰되었습니다.