[Flutter 개발일지] 노트 저장 후 목록이 반영되지 않는 문제 해결

이번 개발 과정에서 노트 작성 후 목록이 갱신되지 않는 문제를 해결하기 위해
Riverpod 상태 관리 방식을 통일하고,fetchNotes() 호출 로직을 명확하게 정리했다.
이 과정에서 발생한 문제, 원인 분석, 해결 과정, 그리고 최종 적용한 코드까지 정리해본다.

 

---

1. 문제 상황

• 노트 작성 후 목록이 갱신되지 않음
• fetchNotes()가 실행되지 않거나, 실행되었어도 UI에 반영되지 않음
• fetchNotes() 실행 여부를 확인하기 위해 로그를 추가했으나, 실행되지 않음

---

2. 원인 분석

1) fetchNotes()가 실행되지 않음

• initState()에서 fetchNotes(userId)가 한 번만 실행됨
• 새로운 노트를 작성해도 fetchNotes()가 다시 실행되지 않음

2) _handleNoteCompletion()에서 fetchNotes() 호출이 빠져 있음

• _submitNote()로 노트를 저장한 후, 목록을 갱신하는 fetchNotes() 호출이 누락됨
• 이로 인해 새로운 노트가 추가되었지만 목록에 반영되지 않음

3) UI가 즉시 반영되지 않음

• state = [...state]; 같은 강제 업데이트가 필요할 가능성이 있음
• 하지만 가장 중요한 문제는 노트 저장 후 fetchNotes()가 호출되지 않은 것

---

3. 해결 방법

1) _handleNoteCompletion()에서 fetchNotes() 호출

await _submitNote(); // 노트 저장
await ref.read(noteListViewModelProvider.notifier).fetchNotes(userId); // 목록 갱신

• 노트 저장이 완료된 후 즉시 fetchNotes()를 실행하여 최신 목록을 불러옴

2) 디버깅 로그 추가

print("fetchNotes 실행 직전 (userId: $userId)");
await ref.read(noteListViewModelProvider.notifier).fetchNotes(userId);
print("fetchNotes 실행 완료");

• fetchNotes()가 실행되는지 로그를 추가하여 확인

3) initState()에서 한 번 실행되는 fetchNotes() 외에도 필요할 때 다시 실행되도록 변경

• 화면이 처음 로딩될 때만 실행되는 것이 아니라, 노트 작성 후에도 실행되도록 추가

---

4. 적용 코드

수정된 _handleNoteCompletion()

Future<void> _handleNoteCompletion(BuildContext context) async {
  showConfirmationDialog(
    context: context,
    title: '노트 작성을 완료하시겠습니까?',
    confirmText: '확인',
    onConfirm: () async {
      if (Navigator.canPop(context)) Navigator.pop(context);

      FocusScope.of(context).unfocus();
      await Future.delayed(const Duration(milliseconds: 100));

      try {
        final userId = ref.read(sessionProvider).id ?? 0;
        print("NoteWritePage - userId: $userId");

        // 노트 저장
        await _submitNote();
        print("노트 저장 완료");

        // fetchNotes 실행
        print("fetchNotes 실행 직전 (userId: $userId)");
        await ref.read(noteListViewModelProvider.notifier).fetchNotes(userId);
        print("fetchNotes 실행 완료");

        CommonSnackbar.success(context, '노트가 성공적으로 등록되었습니다!');

        WidgetsBinding.instance.addPostFrameCallback((_) {
          if (context.mounted) {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(
                  builder: (context) => MainScreen(initialIndex: 3)),
              (route) => false,
            );
          }
        });
      } catch (e) {
        print("_handleNoteCompletion 오류 발생: $e");
        CommonSnackbar.error(context, '노트 저장 실패: $e');
      }
    },
    snackBarMessage: '',
  );
}

---

5. 결과

✅ 노트 작성 후 목록이 즉시 갱신됨
✅ fetchNotes()가 정상적으로 실행되는지 확인 가능
✅ 사용자 경험(UX) 개선: 노트를 저장한 후 목록을 새로고침하지 않아도 됨

---

6. 정리

이번 작업에서 가장 중요한 포인트는 노트 저장 후 fetchNotes()를 호출하는 것이었다.
초기 코드에서는 initState()에서만 fetchNotes()를 호출했기 때문에, 노트가 추가되었음에도 목록이 갱신되지 않았다.
이를 해결하기 위해 노트 저장이 완료된 직후 fetchNotes()를 실행하도록 수정했고, 정상적으로 목록이 업데이트되도록 만들었다.

또한 fetchNotes() 실행 여부를 확인하기 위해 로그를 추가했고, 이를 통해 문제를 빠르게 찾아낼 수 있었다.