지난 글들에서 값이 바뀌는 화면은 StatefulWidget의 State에 값을 두고 setState로 다시 그린다고 했다. 그런데 그 값을 트리 깊숙한 곳의 위젯이 써야 하면 어떻게 될까? 화면 맨 위에 count가 있고, 그 값을 보여주는 Text는 세 단계 아래에 있다고 해보자. 지금까지 배운 방법대로 짜면 이렇게 된다.

class CountPage extends StatefulWidget {
  const CountPage({super.key});

  @override
  State<CountPage> createState() => _CountPageState();
}

class _CountPageState extends State<CountPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Section(count: count); // 한 단계
  }
}

class Section extends StatelessWidget {
  final int count;
  const Section({super.key, required this.count});

  @override
  Widget build(BuildContext context) {
    return InfoBox(count: count); // Section은 count를 쓰지 않는데 넘겨야 함
  }
}

class InfoBox extends StatelessWidget {
  final int count;
  const InfoBox({super.key, required this.count});

  @override
  Widget build(BuildContext context) {
    return CountText(count: count); // InfoBox도 마찬가지
  }
}

class CountText extends StatelessWidget {
  final int count;
  const CountText({super.key, required this.count});

  @override
  Widget build(BuildContext context) {
    return Text('$count'); // 진짜로 쓰는 곳은 여기뿐
  }
}

에러가 나는 건 아니다. 그런데 Section과 InfoBox는 count를 쓰지도 않으면서 생성자로 받아서 아래로 넘기기만 한다. 값이 하나 더 필요해지면 중간에 있는 위젯들의 생성자를 전부 고쳐야 한다. 위젯이 열 단계 깊어지면 열 군데를 고쳐야 한다.

원인: 값을 아래로 보내는 길이 생성자 하나뿐이다

그런데 우리는 이미 생성자로 넘기지 않고도 위쪽의 값을 쓰는 코드를 여러 번 봤다.

Theme.of(context).colorScheme.primary
MediaQuery.sizeOf(context).width

Theme도 MediaQuery도 어디선가 생성자로 받은 게 아니다. of(context)가 트리에서 내 위치로부터 위로 올라가면서 가장 가까운 것을 찾아온다. 이 동작을 하는 위젯이 InheritedWidget이다. 내 값도 같은 방식으로 내려보낼 수 있다.

해결: InheritedWidget으로 값을 트리에 걸어두기

class CountScope extends InheritedWidget {
  final int count;

  const CountScope({
    super.key,
    required this.count,
    required super.child,
  });

  static CountScope of(BuildContext context) {
    final scope = context.dependOnInheritedWidgetOfExactType<CountScope>();
    assert(scope != null, 'CountScope가 위젯 트리 위에 없어요');
    return scope!;
  }

  @override
  bool updateShouldNotify(CountScope oldWidget) => count != oldWidget.count;
}

세 부분으로 나뉜다.

• 필드와 child: 내려보낼 값(count)과, 이 값을 쓸 수 있는 영역(child 아래 전부)이다. required super.child는 부모 생성자로 child를 넘기는 줄임 문법이다.
• of: 위로 올라가 CountScope를 찾아오는 정적 메서드다. 찾지 못하면 null이라서 !로 단언하기 전에 assert로 확인한다. Theme.of(context)가 이 모양이다.
• updateShouldNotify: 값이 바뀌었을 때 아래의 위젯들을 다시 그릴지 정한다. count가 달라졌을 때만 true를 돌려준다.

이제 중간 위젯에서 count가 사라진다.

class _CountPageState extends State<CountPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return CountScope(
      count: count,
      child: Column(
        children: [
          const Section(), // count를 안 넘겨도 됨
          ElevatedButton(
            onPressed: () => setState(() => count++),
            child: const Text('+1'),
          ),
        ],
      ),
    );
  }
}

class Section extends StatelessWidget {
  const Section({super.key});

  @override
  Widget build(BuildContext context) => const InfoBox();
}

class InfoBox extends StatelessWidget {
  const InfoBox({super.key});

  @override
  Widget build(BuildContext context) => const CountText();
}

class CountText extends StatelessWidget {
  const CountText({super.key});

  @override
  Widget build(BuildContext context) {
    final count = CountScope.of(context).count; // 위로 올라가 찾아옴
    return Text('$count');
  }
}

Section과 InfoBox는 count를 몰라도 된다. 값이 필요한 CountText만 CountScope.of(context)로 꺼내 쓴다.

const 위젯은 다시 안 만들어지는데, CountText는 어떻게 갱신되나

위 코드에서 const Section()은 const라서 setState가 불려도 새로 만들어지지 않는다. 그런데 버튼을 누르면 CountText의 숫자는 바뀐다. CountText가 of(context)를 부르는 순간 "나는 CountScope에 의존한다"고 등록되기 때문이다. setState로 새 CountScope가 만들어지고 updateShouldNotify가 true를 돌려주면, 의존을 등록한 위젯만 골라서 다시 그려진다. 중간의 Section, InfoBox는 건드리지 않는다.

이게 of 안에 들어 있는 dependOnInheritedWidgetOfExactType의 역할이다. 같은 일을 하되 구독하지 않는 getInheritedWidgetOfExactType도 있다. 값을 한 번 읽기만 하고 변경에는 반응하지 않는다. "구독하며 읽기"와 "한 번만 읽기"가 갈린다는 걸 기억해 두면 다음 글에서 만날 watch와 read가 쉽게 이해된다.

삽질 포인트: 값을 걸어둔 곳과 읽는 곳이 같은 build면 못 찾는다

값을 내려주는 쪽에서 바로 읽어보면 이런 일이 생긴다.

@override
Widget build(BuildContext context) {
  return CountScope(
    count: count,
    child: Text('${CountScope.of(context).count}'), // 여기서 에러남
  );
}

of는 위로만 올라간다. 이 build의 context는 이 위젯 자신의 위치이고, CountScope는 그보다 아래에 있다. 내 위쪽에는 CountScope가 없으니 못 찾고, 앞에서 넣어둔 assert가 터진다.

해결은 읽는 쪽을 별도의 위젯으로 빼서 CountScope보다 아래에 두는 것이다. 위에서 CountText를 따로 만든 이유가 이거다. 위젯을 새로 만들기 번거로우면 Builder로 감싸서 새 context를 얻을 수도 있다.

CountScope(
  count: count,
  child: Builder(
    builder: (context) => Text('${CountScope.of(context).count}'), // OK
  ),
)

Builder의 context는 CountScope 아래의 위치라서 위로 올라가면 찾을 수 있다.

InheritedWidget만으로는 왜 부족한가

InheritedWidget은 다른 위젯처럼 불변이다. count를 바꾸려면 위쪽의 State에서 setState를 불러서 새 CountScope를 만들어야 한다. 그래서 값을 읽는 건 편해졌지만, 값을 바꾸는 쪽은 여전히 StatefulWidget과 콜백에 기대야 한다. 값이 두세 개로 늘어나면 InheritedWidget 클래스와 of, updateShouldNotify를 값마다 만들어야 하는 것도 번거롭다.

이 반복을 줄여주는 게 다음 글의 Provider다. Provider는 InheritedWidget을 감싼 패키지라서, 오늘 본 원리가 그대로 안에 들어 있다. 참고로 Theme, MediaQuery도 모두 InheritedWidget이다.

Compose, SwiftUI와 비교하면

// Compose - CompositionLocal
val LocalCount = compositionLocalOf { 0 }

CompositionLocalProvider(LocalCount provides count) {
    Section() // 중간 함수는 count를 모른다
}

@Composable
fun CountText() {
    Text("${LocalCount.current}")
}

// SwiftUI - Environment
struct CountKey: EnvironmentKey {
    static let defaultValue = 0
}
extension EnvironmentValues {
    var count: Int {
        get { self[CountKey.self] }
        set { self[CountKey.self] = newValue }
    }
}

Section().environment(\.count, count)

struct CountText: View {
    @Environment(\.count) var count
    var body: some View { Text("\(count)") }
}

• 값을 걸어두는 곳: Flutter InheritedWidget을 만들어 트리에 넣기 / Compose CompositionLocalProvider / SwiftUI .environment
• 값을 꺼내는 곳: Flutter CountScope.of(context) / Compose LocalCount.current / SwiftUI @Environment
• 기본값: Flutter는 없으면 에러(assert) / Compose compositionLocalOf의 기본값 / SwiftUI defaultValue
• 재그리기 대상: 세 방식 모두 값을 읽는 쪽만 다시 그려진다

Compose의 CompositionLocal과 가장 닮았다. 다만 Flutter는 이걸 위해 위젯 클래스를 직접 만들어야 해서 코드가 길다.

정리

• 트리 깊은 곳의 위젯이 값을 쓰려고 생성자로 계속 넘기면, 쓰지 않는 중간 위젯까지 코드를 고쳐야 한다
• Theme.of(context)처럼 위로 올라가며 값을 찾아주는 위젯이 InheritedWidget이고, of와 updateShouldNotify를 만들어 쓴다
• of는 값을 구독하며 읽어서, 값이 바뀌면 읽은 위젯만 다시 그려진다 (const 위젯 사이에 있어도 갱신된다)
• 값을 걸어둔 곳과 같은 build에서 읽으면 위로 올라가도 못 찾으므로, 읽는 쪽을 별도 위젯이나 Builder로 분리한다
• 값을 읽기는 편해지지만 바꾸는 건 여전히 setState에 기대고 코드도 반복되므로, 이를 감싼 Provider를 쓴다

다음 글에서는 ChangeNotifier와 Provider로 상태를 공유하는 방법을 다뤄보겠다.