router.navigate 동작이 달라졌을까요?
66
投稿した質問数 10
최신 버전에서는 navigate 동작이 바뀐거같네요
"react": "19.1.0",
"react-native": "0.81.5",
"expo": "~54.0.33",
"expo-router": "~6.0.23",
사용하면서 강의 듣는데..
router.push는
A -> B -> C -> C -> B -> B -> C -> B
일 때 뒤로가기 하면 정확하게 역순으로
B -> C -> B -> B -> C -> C -> B -> A 로 동작하는데
router.navigate는
A -> B -> C -> C -> B -> B -> C -> B 일때
B -> C -> B-> C -> B -> A 처럼
바로 연달아서 같은 라우터를 연속 클릭햇을 때에만 뒤로가기 할 때 중복이 제거되거 되는 것 처럼 동작하는 것 같아요
activity 폴더에 적용한 코드들입니다
index.tsx
import NotFound from "@/app/+not-found";
import { usePathname, useRouter } from "expo-router";
import { Text, TouchableOpacity, View } from "react-native";
export default function Index() {
const router = useRouter();
const pathname = usePathname();
if (
![
"/activity",
"/activity/follows",
"/activity/replies",
"/activity/mentions",
"/activity/reposts",
"/activity/verified",
].includes(pathname)
) {
return <NotFound />;
}
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<View>
<TouchableOpacity onPress={() => router.push(`/activity`)}>
<Text style={{ color: pathname === "/activity" ? "red" : "black" }}>
All
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push(`/activity/follows`)}>
<Text
style={{
color: pathname === "/activity/follows" ? "red" : "black",
}}
>
Follows
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push(`/activity/replies`)}>
<Text
style={{
color: pathname === "/activity/replies" ? "red" : "black",
}}
>
Replies
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push(`/activity/mentions`)}>
<Text
style={{
color: pathname === "/activity/mentions" ? "red" : "black",
}}
>
Mentions
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push(`/activity/reposts`)}>
<Text
style={{
color: pathname === "/activity/reposts" ? "red" : "black",
}}
>
Reposts
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => router.push(`/activity/verified`)}>
<Text
style={{
color: pathname === "/activity/verified" ? "red" : "black",
}}
>
Verified
</Text>
</TouchableOpacity>
</View>
</View>
);
}
_layout.tsx
import { Slot } from "expo-router";
export default Slot;
[tabs].tsx
export { default } from ".";
3분 강의로 2시간이 사라진.....ㅠㅠ
回答 1
0
안녕하세요, 인프런 AI 인턴입니다. 개발자 취업 포기님,
navigate와 push의 동작 차이에 대해 고민이 많으신 것 같습니다. 두 동작은 라우트 관리를 다르게 처리하기 때문에, 사용자 경험에서도 다르게 적용될 수 있습니다. navigate의 경우 동일한 경로로의 반복된 전환 시 중복된 기록이 제거되는 특징이 있을 수 있습니다.
확인해볼 사항
라우트 스택 확인:
navigate는 페이지 스택을 관리할 때 중복된 경로를 제거하는 방식으로 동작할 수 있습니다. 이 경우 반복 클릭으로 동일한 경로로 이동할 때 중복이 제거되고 마지막 경로만 남길 수 있습니다.
push는 정확한 히스토리 스택을 그대로 유지하므로 차이점을 명확히 느낄 수 있습니다.
버전 차이와 업데이트:
- 현재 사용 중이신 라이브러리의 버전에서는 해당 동작이 의도된 것인지, 라이브러리 문서를 통해 확인해보세요. 특정 버전에서 의도된 동작 변경이 이루어질 수 있습니다.
- 현재 사용 중이신 라이브러리의 버전에서는 해당 동작이 의도된 것인지, 라이브러리 문서를 통해 확인해보세요. 특정 버전에서 의도된 동작 변경이 이루어질 수 있습니다.
사용 사례 분석:
- 위의 코드에서
router.push및router.navigate의 역할을 명확히 구분하여 원하는 형태로 사용자 네비게이션 흐름을 설정해보세요.
- 위의 코드에서
동일 경로 네비게이션 시 대체 방법:
navigate로 반복되는 경로를 처리하시기 보다 조건문 등을 통해 중복을 방지하거나,push로 모든 푸시 기록을 유지하면서도, 사용자가 원하는 방식으로 기능을 구현하는 것도 방법입니다.
다음 자료를 통해 더욱 명확한 답변을 찾아볼 수 있습니다:
- React Navigation Documentation: 상태 히스토리 관리와 관련된 추가 지침을 확인해보세요.
저는 질문자님의 이해를 돕고자 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
expo-blur 사용하면서 생긴 버그입니다.
0
121
3
Toast 기능
0
78
2
onEndReached 함수가 바로 호출 되지 않는 이슈
1
67
1
expo push service에 관한 질문
0
80
2
ios에서 개발중이신 분들은
1
89
1
[질문아님] tabBarLabel 대신 tabBarShowLabel
1
60
1
Location.getCurrentPositionAsync({}); 에러
1
129
3
.
0
123
2
EAS preview 빌드 후 Device에서 카카오 로그인 브라우저가 안켜짐
0
123
2
폴더 구조 관련 질문
0
135
2
혹시 리액트네이티브 관련해서 좋은 참고서도 있을까요??
0
107
1
제로초님께서는 Nativewind는 사용안하지는지 궁금합니다.
1
285
2
.
0
94
2
eas build:configure 안되는데, "git"이 반드시 설치되어 있어야 하나요?
0
83
2
.
0
107
2
혹시 해당 강의 보면서 테스트용으로 사용할 맥북을 구매할 예정인데 어느정도 스펙 이상으로 사야 할지 의견 받아볼수있을까요?
0
76
2
.
0
116
1
.
0
124
2
기기에서는 네트워크 에러가 납니다.
0
103
2
빌드 문의드립니다.
0
75
1
.
0
129
2
.
0
84
2
Expo-blur unimplement 오류
0
111
3
.
0
108
2

