Flutter에서 context란 도대체 무엇일까?

Flutter의 context란 도대체 무엇일까?

context의 개념을 이해하기 위해선 먼저 Widget Tree에 대해 알아야한다.

---

1️⃣ Widget Tree

 Widget은 Flutter의 모든 것이라고 해도 과언이 아닐 정도로 위젯으로 시작해서 위젯으로 끝이 난다.

 Web과 비교하면 Web은 DOM 트리를 생성하고 관리하듯, 플러터는 Widget 트리를 생성하여 관리한다.

 UI를 구성하는 모든 요소를 Widget이라고 하며, 이 Widget은 Element를 구성하고 다시 Element가 Render Object를 구성한다. 

Flutter 내의 3가지 Tree

 위 그림과 같이 Widget, Element, Render Object가 하나씩 짝을 이뤄 대응하고 각각의 트리 구조를 형성하고 있다.

 Widget이 Element를 구성하면 Element는 Widget의 인스턴스로서 UI와 생애주기를 관리하고, Element가 다시 Render Object를 구성하여 이 Render Object가 최종적으로 UI를 그린다. 즉, 내가 위젯을 작성함으로 인해서 Element가 생애주기를 관리하고 Render Object가 화면을 그려낸다고 보면 된다.

 

 그런데, 만약 기존 위젯 트리 내에서 새로운 위젯을 추가한다면? 이 '새로운 위젯'은 저 위젯 트리 내에서 어디에 위치해야할 지 모른다.

어디로 갈 지 모르는 새로운 위젯

이 때 필요한 것이 바로 context이다.

 

2️⃣ BuildContext context

 context는 Widget Tree 상에서 위치에 관한 정보를 담고 있어, 새로운 위젯이 어디에 위치해야 할 지 알려주는 길잡이 역할을 한다. Stateful Widget과 Stateless Widget 모두 build 함수를 이용하여 Widget을 반환하는데, 이때 파라미터 자리에는 항상 context를 포함하고 있다.

 이 context가 바로 Widget Tree 내의 위치 정보를 갖고 계층 구조를 만드는 것이다.

 

보통의 경우라면 Stateless Widget이나 Stateful Widget을 반환하기 때문에 기본적으로 context를 갖고 있으며 이 때문에 context의 필요성이나 문제점을 발견하지 못 할 때가 많다. 하지만 미디어쿼리나 스낵바 등을 사용할 땐 context가 별도로 필요하다.

 그럴 땐 이렇게 해당 위젯을 Builder()함수로 감싸주면 된다.

---

 사실 실제로 작업하면서 context를 직접적으로 활용해본 적은 없었다. 하지만 context의 정확한 개념을 확립한 뒤 작성하는 코드는 확실히 다르다. 꼭 context에 대해 공부하고 넘어가자.