[Flutter] GoRouter 라우터 정리 – push, go, pushReplacement 차이

요즘 Flutter로 앱 개발하다 보면 Navigator 대신 GoRouter를 많이 쓴다.
나도 처음엔 그냥 context.push만 쓰면 되는 줄 알았는데,
막상 라우팅 구조가 커지니까 이게 왜 필요한지가 명확하게 느껴졌다.

오늘은 이 GoRouter의 기본 원리랑,
push, go, pushReplacement 이 세 가지 차이를 정리해봤다.

1. 기본 Navigator는 이렇게 동작한다

기존 Flutter 내비게이션은 아래 코드처럼 Navigator.push()로 새 화면을 열고
Navigator.pop()으로 돌아가는 스택 구조

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailScreen()),
);

이 구조는 간단하지만, 화면이 많아지면 코드가 복잡해지고
딥링크나 웹 URL 처리가 불편하다는 단점이 있다.
그래서 나온 게 GoRouter다.

---

2. GoRouter는 URL 기반 라우팅이다

GoRouter는 Navigator 2.0을 기반으로 만들어진 라우터
쉽게 말해서 “웹처럼 URL로 페이지를 관리할 수 있게 해주는 라우터”다.

• /home, /login, /community/:id 이런 식으로 주소 기반으로 이동 가능
• 웹에서 새로고침해도 같은 화면 유지
• 딥링크(링크로 앱 바로 열기)도 지원

결국 GoRouter는 모바일 + 웹 둘 다 통합 가능한 내비게이션 시스템이라고 보면 된다.

---

3. push / go / pushReplacement 차이

이제 핵심이다.
GoRouter를 쓰면 보통 context.push()를 쓰는데,
이 외에도 context.go(), context.pushReplacement()가 있다.

메서드 동작 방식 비유

context.push()	현재 페이지 위에 새 페이지를 쌓는다	“다음 장소로 이동 (뒤로가기 가능)”
context.go()	기존 페이지 스택을 다 지우고 새로 이동	“텔레포트처럼 바로 이동 (뒤로가기 불가)”
context.pushReplacement()	현재 페이지를 새 페이지로 교체	“현재 장소를 갈아끼우는 느낌”

---

 

push

context.push('/detail');

새 페이지를 쌓는다.
pop()하면 원래 페이지로 돌아올 수 있다.
게시글 목록 → 게시글 상세 이런 구조에 잘 어울린다.

---

go

context.go('/home');

기존 스택을 모두 비우고 /home으로 바로 이동한다.
로그인 성공 후 홈으로 이동할 때 자주 쓴다.
이전 화면으로 돌아갈 필요가 없을 때 유용하다.

---

 pushReplacement

context.pushReplacement('/community-detail', extra: postId);

현재 페이지를 새 페이지로 교체한다.
예를 들어 글 작성 완료 후 상세페이지로 이동할 때 적합하다.
작성 페이지로 다시 돌아가면 UX상 어색하니까 이렇게 처리하는 게 맞다.

---

5. extra로 데이터 전달

GoRouter는 extra로 화면 간 데이터를 넘길 수 있다.
예전 Navigator의 arguments랑 비슷한 개념이다.

context.push('/community-detail', extra: postId);

받는 쪽에서는 이렇게 꺼내면 된다.

final postId = GoRouterState.of(context).extra as String;

---

6. 어떤 걸 써야 할까?

화면 이동 후 뒤로가기 가능해야 함	push	이전 페이지로 돌아올 수 있음
로그인, 홈 이동 등 스택 초기화 필요	go	불필요한 이전 페이지 제거
글쓰기 → 상세보기처럼 교체 이동	pushReplacement	이전 페이지로 돌아가면 안 됨

---

 

내 프로젝트에서는 커뮤니티 글 작성 후 이렇게 쓴다.

context.pushReplacement(
  '/community-detail',
  extra: vmState.postId,
);

이렇게 하면 작성 완료 후 “상세 화면으로 이동”하면서
뒤로가기 눌러도 작성 화면으로 돌아가지 않는다.
즉, UX적으로 깔끔하게 마무리된다.

---

8. 정리하자면

기능 설명 뒤로가기

push	새 화면을 쌓는다	가능
go	모든 스택을 비우고 이동	불가능
pushReplacement	현재 화면을 교체	불가능
extra	데이터 전달	가능

---

요약하자면,

push는 “쌓고”,
go는 “갈아엎고”,
pushReplacement는 “갈아끼운다”.

GoRouter는 네이티브 내비게이션보다 훨씬 유연하고
웹처럼 URL 기반으로 관리할 수 있어서
규모가 있는 앱에서는 필수에 가깝다.