본문 바로가기
컴퓨터언어/Dart&Flutter

[flutter] Riverpod의 ProviderScope는 최상단에 있어야 한다.

by 인턴개구리 2024. 1. 13.
ProviderScope는 Riverpod에서 사용되는 중요한 개념 중 하나로, 프로바이더를 생성하고 관리하는 컨테이너 역할을 합니다. Riverpod는 상태 관리를 위해 프로바이더를 사용하는데, ProviderScope는 이러한 프로바이더를 효과적으로 관리하고 사용할 수 있도록 도와줍니다.

주요 특징 및 역할:
1. 프로바이더의 생성과 소멸: ProviderScope는 프로바이더의 생성과 소멸을 관리합니다. 앱의 각 부분에 대해 독립적인 ProviderScope를 만들 수 있으며, 해당 스코프 내에서만 프로바이더가 유효합니다.

2. 프로바이더의 계층 구조: ProviderScope는 계층적으로 구성될 수 있습니다. 상위 스코프에서 생성된 프로바이더는 하위 스코프에서 사용될 수 있습니다. 이를 통해 프로바이더의 범위를 효과적으로 관리할 수 있습니다.

3. 프로바이더의 사용 범위 제어: ProviderScope는 프로바이더의 사용 범위를 제어하여, 필요한 부분에서만 해당 프로바이더를 사용할 수 있도록 합니다.

Chat GPT 왈

 

패스트 캠퍼스 강의를 듣던 중, 강사님께서 다음과 같은 에러를 알려주셨다.

ProviderScope를 선언하였지만, ProviderScope를 찾을 수 없다.

물론 강사님은 우리에게 알려주실려고 의도적인 에러를 낸 것이지만, 문제를 막상 맞닥뜨리면 어떻게 할 지 감이 안왔다.

항상 막힐때마다 찾아가는 GPT한테 해당 에러를 보여주고, 코드를 보여주었다. 다음과 같은 답을 내놓았다.

분명 내 코드에는 ProvderScope를 선언하였는데, ProviderScope가 없으니 추가하라는 거짓 답변을 내놓았다.

음.. 강사님이 알려주는 상황이 아니였다면 나는 GPT한테도 답을 못 얻고 시간을 오래 지체했을 것 같다.

이유는 이렇다. ref.read가 먼저 선언되니 ProviderScope를 찾지 못하고 에러를 반환하는 것이다. 그러면 이 MainScreen보다 더 위에 있는 곳에서 ProviderScope를 선언해야 하는 것이다.

다음과 같이 MainScreen 상위에 ProviderScope를 위치시키면 간단히 해결된다.

 

이 간단한 에러가 나에게 중요하게 다가왔던 이유는,

1. ChatGPT가 해결을 하지 못함.(어쩌면 ChatGPT의 한계를 엿볼수도 있어서 앱 개발자의 생명 연장에 뭔가 희망적인 느낌인 동시에, 내 에러를 잡아주지 못할 수 있다는 안타까운 상황이 동시에 느껴짐)
2. 해결책을 나 혼자 찾기는 정말 어려울 것 같다.(ProviderScope가 상단에 있어야 한다는 것까지는 이해 했는데, CustomThemeApp 아래에 있어야 하는지, MaterialApp 아래에 있어야 하는지, 이런 것 까지는 디테일하게 모르겠다. 즉, CustomThemeApp이 뭔지, MaterialApp이 뭔지 하나하나 이해를 해야 한다는 것인데, 양이 너무 방대하다..)

누군가가 Flutter가 쉽다고 했지만, 나에게 아직은 너무 어렵다.