Flutter MaterialApp 에서 home, initialRoute 차이

Flutter 의 MaterialApp 에는 많은 속성이 존재한다.
Route 관련해서도 정말 많은 속성이 존재하는데 나도 처음엔 헷갈린 채로 사용했던 것 같다.
이번 글은 혹여나 나와 같이 헷갈리는 사람이 있지 않을까 하여 포스팅해본다.

MaterialApp 에서 home, initialRoute 의 차이는?

이 둘의 차이가 도대체 무엇인지 헷갈린다.
둘 다 앱 초기 라우트를 호출하는 것 아닌가?
그건 맞다. 하지만 공식 문서를 보면 initialRoute 를 정의한다면 home 은 정의하지 말아야 한다.

왜 둘을 같이 사용할 수 없는가에 대해서 생각해보려면 둘의 역할을 각각 알아봐야 한다.
이 둘의 역할은 다음과 같다.
 

home 의 역할
- 앱의 최초 진입 화면을 지정한다.
- 만약 home 을 지정한다면 routes 에 / 를 설정해서는 안된다. 즉, / 의 역할이 된다.


initialRoute 의 역할
- 처음 표시할 라우트 이름을 지정할 수 있다.
- 경로 이름이 슬래시로 시작하면 "딥 링크"로 처리되며, 이 경로가 푸시되기 전에 이 경로로 연결되는 경로도 푸시된다. (아래에서 더 자세히 설명할 예정)
 

공식문서에서는 home 의 경우, initialRoute 가 지정되지 않았거나 intialRoute 를 표시할 수 없는 경우 home 이 대신 표시된다고 한다.
 
아무튼 개발자가 예상하지 않는 동작이 일어날 수 있기 때문에 두 개를 동시에 지정하지 않도록 권장하는 것 같다.
이걸로는 아직 동일한 기능을 하는 것처럼 보이는 두 속성이 왜 별도로 존재하는지 이해하기 어렵다. 아래에서 좀 더 내용을 자세히 다뤄보겠다.

 

initialRoute 의 세부 동작

보통이면 초기 라우트를 / 로 지정하는 것이 일반적일 수 있다.
하지만 나 같은 경우, 이미 다른 화면이 / 경로로 지정되어 있어서, 초기 라우트를 / 로 설정하면 혼동이 생길 것 같았다.

그래서 initialRoute 에 /initial 라는 Named Route 로 지정하고 해당 경로를 routes 나 onGenerateRoutes 에 처리하도록 구성했다.
그리고 정말 예상치 못한 일이 일어났다.


예상 동작
앱 시작 시 /initial 이 호출되어 지정한 초기 화면으로 이동이 된다.

실제 동작
앱 시작 시 두개의 화면이 호출된다.

이에 대해 공식 문서를 찾아보았고 아래처럼 initialRoute 에 대해 정의되어 있었다.

initialRoute property
For example, if the route was /a/b/c, then the app would start with the four routes /, /a, /a/b, and /a/b/c loaded, in that order.
Even if the route was just /a, the app would start with / and /a loaded.

 
위에서 썼던 "경로 이름이 슬래시로 시작하면 "딥 링크"로 처리되며, 이 경로가 푸시되기 전에 이 경로로 연결되는 경로도 푸시된다." 가 바로 이 의미이다.

즉 /initial 은 / -> /initial 이렇게 동작하고, 이걸 "딥 링크"로 처리된다고 말하는 것이었다.
웬만해서 초기 화면 설정은 하나의 화면으로 설정하는 것이 대부분이긴 하지만, 예외의 경우 여러 스택의 화면이 필요한 경우도 있기 때문에 initialRoute 속성이 존재하는 것 아닐까 생각해본다.

 

 

결론

그래서 결론은 대부분의 경우 초기 화면을 정해야 한다면, 일반적으로는 home 속성으로 처리하는 것이 가장 깔끔하고 단순하다.

다만 시작 지점을 초기 네비게이션 스택을 미리 구성해야 하는 경우 등 예외의 케이스가 있어야 한다면 initialRoute를 사용하는 편이 적합하지 않을까
헷갈려!!