여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리하는 기능
예전 리액트는 스택 구조였음
즉 한번 렌더링을 시작하면 끝까지 멈추지 않고 다 처리해야 했음.
하지만
동시성 모드에선 중간에 멈추거나 작업을 잠시 뒤로 미뤄서 중요한 작업 먼저 끝낼 수 있게 됨
이 동시성을 활용하여 리액트는 중요한 작업과 덜 중요한 작업을 나눠서, 덜 중요한 작업을 백그라운드에서 진행, 중요한 부분은 바로 사용자에게 보여줌
ex - 검색창에 입력 시, 검색 결과가 업데이트되더라도, 리액트가 해당 작업을 백그라운드에서 처리하게 해서 화면이 느려지지 않게 할 수 있음
동시성을 활용한 기능
- startTranstition
특정 상태 업데이트를 덜 중요한 작업으로 분류해서 사용자가 클릭하거나 입력하는 반응 같은 중요한 업데이트가 우선적으로 처리 - useDeferredValue
훅을 사용시 값의 업데이트를 잠깐 지연시킬 수 있어서, 사용자가 뭔가 빠르게 입력할 때마다 리렌더링되지 않게 최적화할 수 있음
동시성 모드의 장점은 사용자와 상호작용하는 부분이 훨씬 매끄럽게 느껴짐
ex - 사용자가 스크롤할 때 다른 무거운 작업이 있어도, 동시성 모드 덕분에 스크롤이 우선적으로 부드럽게 작동함
다만 무분별하게 적용시 오히려 성능이 떨어질 수 있음
그래서 필요한 부분만 잘 활용해야함
동시성이 필요한 부분
사용자와의 상호작용이 빈번하고 응답성이 중요한 경우
ex- 검색 필터링 / 자동완성
검색어 입력할 때마다 업데이트 되면 모든 입력마다 화면이 리렌더링이 되어 앱이 느려지고 끊길 수 있음
ex-무거운 데이터나 리스트 로딩
긴 스크롤 목록을 보면서 네트워크를 통해 데이터를 로딩할 때, 새로운 항목을 추가로 불러오는 작업보다 사용자가 현재 보고 있는 화면의 스크롤이 더 중요한 작업
이때 동시성을 사용하면 로딩은 백그라운드, 스크롤을 최우선 부드럽게 렌더링
ex-애니메이션이 포함된 화면 전환이나 중요도가 높은 사용자 입력 작업
사용자가 버튼을 클릭했을 때 UI가 즉각적으로 반응, 이후 비동기 작업이 처리되도록 설정해주면 클릭 시의 지연 없이 상호작용이 자연스러워짐 -- 낙관적 UI 업데이트
