앱에서 애니메이션을 rendering 하는 것은 성능 측정과 관련하여 가장 많이 언급되는 관심 주제 중 하나이다

• 플러터는 초당 60프레임을 보여주는 것을 목표로 한다
  즉, 60프레임을 렌더링하는 경우, 각 프레임은 약 16ms 마다 렌더링되어야 한다
• Jank는 UI가 매끄럽게 렌더링되지 않을 때 발생한다

" 빠른 앱은 좋지만 매끄러운 앱은 더 좋다 ! "

: 렌더링이 성능향상에 큰 영향을 미치는 이유

플러터는 build 단계에서 Widget tree와 Element tree를 만들고, layout 단계에서 Render tree를 만든 다음, 마지막에 화면에 칠하는 단계에서 가장 마지막에 만든 Render tree를 사용한다.

• Widget tree와 Element tree는 Render tree를 위해 만들어지는 tree이다
• Element tree는 Widget tree에 1:1 대응이 되어 Widget tree를 바탕으로 만들어진다
• 즉, 플러터는 tree를 3개 만든다

🌲 Tree를 3개나 만드는 이유 !?

: 렌더링 성능을 보장하기 위해
즉, 한 화면을 그린 다음에는 전체 화면을 여러번 rerendering 하는 것이 하니라 꼭 필요한 부분만 다시 rendering 하기 위해서이다

build 함수

@override
Widget build(BuildContext context) {
  return Container(
    color: Colors.blue,
    child: Row(
      children: [
        Image.network('https://www.example.com/1.png'),
        const Text('A'),
      ],
    ),
  );
}

위 함수는 BuildContext context 를 받고 Widget 중 하나인 Container를 return 한다

• return 한 Widget은 어디로 가는걸까 ?
  : Widget tree로 간다

• build()에서 받고 있는 context는 무엇일까?
  : 자신이 widget tree에서 어떤 노드에 위치하는지 알려주는 정보이다