중급

상태 끌어올리기

여러 위젯이 같은 상태를 필요로 할 때 공통 부모로 상태를 이동합니다.

개념 먼저 보기

상태 끌어올리기의 기본 개념부터 잡기

상태 끌어올리기 문서는 먼저 용어의 뜻을 잡고, 그 다음 Flutter 코드에서 어디에 쓰이는지 연결해서 읽는 것이 좋습니다.

아래 항목들은 이 문서에서 다루는 내용을 작은 단위로 나눈 것입니다. 각 항목을 읽은 뒤 예제를 보면 코드가 훨씬 덜 추상적으로 느껴집니다.

종류별로 하나씩

상태 끌어올리기에서 나눠 볼 핵심 요소

개념

자식 위젯 둘 이상이 같은 값을 봐야 하면 상태 위치를 위로 올립니다.

언제 쓰나: 부모는 상태와 변경 함수를 가지고, 자식은 값과 콜백을 전달받습니다.

Flutter에서: 이 방식은 패키지 없이도 데이터 흐름을 명확하게 만듭니다.

// 상태 끌어올리기 예제입니다.
// 먼저 코드의 큰 흐름을 보고, 주석을 따라 각 줄의 역할을 확인하세요.
LessonItem(
  done: lesson.done,
  onChanged: (value) => updateLesson(lesson.id, value),
)

한계

트리가 깊어지면 여러 단계로 값을 전달해야 합니다.

언제 쓰나: 전역적으로 공유되는 로그인, 테마, 장바구니에는 별도 상태관리 도구가 편합니다.

Flutter에서: 그래도 상태 소유권을 이해하는 기본 훈련으로 매우 중요합니다.

// 상태 끌어올리기 예제입니다.
// 먼저 코드의 큰 흐름을 보고, 주석을 따라 각 줄의 역할을 확인하세요.
LessonItem(
  done: lesson.done,
  onChanged: (value) => updateLesson(lesson.id, value),
)

부연 설명

개념

  • 자식 위젯 둘 이상이 같은 값을 봐야 하면 상태 위치를 위로 올립니다.
  • 부모는 상태와 변경 함수를 가지고, 자식은 값과 콜백을 전달받습니다.
  • 이 방식은 패키지 없이도 데이터 흐름을 명확하게 만듭니다.

부연 설명

한계

  • 트리가 깊어지면 여러 단계로 값을 전달해야 합니다.
  • 전역적으로 공유되는 로그인, 테마, 장바구니에는 별도 상태관리 도구가 편합니다.
  • 그래도 상태 소유권을 이해하는 기본 훈련으로 매우 중요합니다.

깊게 이해하기

상태 끌어올리기 문서는 Flutter 앱을 만들 때 반복해서 마주치는 개념을 독립적으로 정리한 페이지입니다. 먼저 용어의 의미를 잡고, 그 다음 실제 코드에서 어디에 배치되는지 연결해 보면 학습 속도가 빨라집니다.

이 주제는 단독으로 외우기보다 앞뒤 문서와 함께 보는 것이 좋습니다. 예를 들어 문법 주제는 위젯 코드에서 어떻게 드러나는지, 배포 주제는 실제 앱 운영 흐름에서 어떤 결정을 요구하는지 함께 확인하세요.

상세 예제

아래 예제는 이 문서의 핵심 개념을 실제 프로젝트에서 작은 단위로 적용하는 형태입니다.

LessonItem(
  done: lesson.done,
  onChanged: (value) => updateLesson(lesson.id, value),
)

실무에서 주의할 점

  • 처음에는 가장 단순한 구현으로 시작하고, 반복되는 시점에 구조를 정리하세요.
  • 예제 코드를 그대로 외우기보다 입력, 출력, 책임을 나누어 읽어 보세요.
  • 새 문서를 추가할 때는 같은 형식으로 요약, 핵심 설명, 예제, 체크리스트를 유지하세요.

실습 체크리스트

상태 소유자 정하기콜백으로 변경 요청props drilling 한계 이해