• 리액트 18의 동시성 모델을 주로 다룸
• React 15에서 16으로 넘어오면서 콜스택 기반의 렌더링 아키텍쳐가 Fiber 아키텍쳐로 변경되었다
• 이 때 Suspense 컴포넌트가 도입 되었다
• 18에서는 동시성 모델이 완성 되었다
  • 대규모 화면 전환에서도 높은 응답성을 유지할 수 있다

리액트가 업데이트를 바라보는 관점

• 업데이트는 어플리케이션 생명 주기 동안 빈번하게 발생한다
• 업데이트가 발생하면 리액트는 호스트 트리(DOM)와 리액트 트리(Virtual DOM) 사이의 변경점을 확인하고 반영하는 과정을 거친다
• 이런 빈번한 렌더링 작업을 최적화하기 위해 업데이트를 모아서 일괄 처리하는 방식을 취한다
• 이런 방식에도 단점은 존재한다
  1. 업데이트는 모두 다 같은 종류의 업데이트인가?
  2. 업데이트 간에 중요도는 없는가?

업데이트는 모두 다 같은 종류의 업데이트라고 할 수 있는가?

const SearchApp = () => {
	const [text, setText] = useState('');

	return (
		<>
			<input onChange={(...) => setText(...)} />
			<AsyncAutoComplete target={text} />
		</>
	)
}

• 위 컴포넌트에서 발생한 업데이트는 두 가지이다
  1. <input />으로부터 발생한 text 상태 업데이트
  2. 자동완성 API의 응답으로부터 발생한 <AsyncAutoComplete />의 자동완성 리스트 상태 업데이트
• 두 업데이트의 차이점은 이벤트를 발생시킨 이벤트의 시작점에 있다
• 1번은 사용자의 물리적 행동(키보드 입력)으로 부터 발생하였다
• 2번은 비동기(자동 완성 API)로부터 발생한 업데이트이다
• 자동완성 UI는 사용자 입력에 따라 ‘리’, ‘리액’, ‘리액트’의 UI가 순차적으로 렌더링되고 있다
• 전환(transition)은 이와 같이 UI가 A0 → A1로 전환되는 것을 말한다
• 그리고 이런 UI 전환 렌더링을 발생시키는 업데이트를 전환 업데이트라고 한다