[GetX] 같은 Controller를 사용하는 여러 페이지가 있는 경우

구현하고 있는 상품 상세 페이지에는 상품을 업로드한 사람이 올린 다른 상품을 보여주는 Gridview가 있었습니다.

 

GridView에 있는 item 중에서 하나를 선택하면 선택한 상품의 상세 페이지로 이동하는 시나리오 입니다.

각 상품들은 id를 갖고 있고, 이 id를 이용해서 서버에 데이터를 요청해야 합니다.

 

React를 개발한 경험을 갖고 Getx를 사용하면서 페이지가 이동하면 당연히 onInit이 다시 실행되고, Controller 역시 페이지별로 할당될 줄 알았습니다.

 

그런데...

 

이동한 페이지에서는 이전 페이지에서 사용하던 Controller를 그대로 사용하고, onInit 함수 역시 호출되지 않았습니다.

게다가 페이지에서 사용하는 scrollController도 중복되어서 에러가 발생했습니다.

 

엄청난 구글링과 GetX 문서를 읽어보니 GetX의 Controller는 페이지별로 생성되지 않고, 한번만 초기화된다고합니다.  그렇기 때문에, 이후에 같은 페이지를 다시 렌더링해도 이전에 초기화된 Controller를 사용합니다.

 

원인은 알겠는데, 어떻게 해결해야할지 도저히 감이 안 잡혀서 GetX의 Github에 있는 텔레그램 오픈방에 조인했습니다.

텔레그램에 상황과 질문을 올렸더니 한 분이 답변을 해줬습니다.

GetX Controller를 호출할 때, tag를 사용하면 가능하다고 합니다!

Controller가 설정한 tag 별로 초기화되고, onInit도 실행됩니다.

 

해결방법은 Controller를 생성할 때, tag를 입력하면되고, 해당 tag로 Controller가 생성됩니다.

Controller controller = Get.put(Controller(), tag: 'YOUR_TAG');

위 처럼 생성하면 GetX Log에는 “ControllerYOUR_TAG” has been initialized 라고 표시횝니다.

 

제 상황에 적용해보자면,

/pages/1과 /pages/2에서 Controller를 사용합니다.

 

pageWidget에서 Controller를 생성할 때 아래와 같이 생성하면

Controller controller = Get.put(Controller(), tag: Get.parameter['id']);

Controller는 /pages/1 접속할 때는 Controller1, /pages/2에 접속할 때는 Controller2 생성됩니다.

GetX 공식 문서에 자세한 설명이 없어서 많이 해맸는데, 텔레그램을 통해서 답을 얻을 수 있었습니다.

 

저에게 답변을 해준 Naji님 정말 감사합니다. Thank you Naji😄