코드 한 줄로 경험하는 React 동시성의 마법

수천 개의 데이터를 입력할 때마다 필터링하고 화면에 그리면서 브라우저의 메인 스레드가 오래 점유되어, 검색어 입력이 멈칫하고 화면이 버벅이는 문제가 발생했습니다.

React 18의 동시성 기능인 useTransition은 사용자 입력처럼 즉시 반응해야 하는 작업과 검색 결과 렌더링처럼 무거운 작업을 나누어, 입력을 우선 처리하면서 결과 화면은 번갈아 업데이트하도록 돕습니다.

동시성은 여러 작업을 실제로 동시에 실행한다기보다 작업의 우선순위를 조정해 긴 렌더링이 사용자 조작을 막지 않게 하는 방식이며, 복잡한 목록을 다룰 때 입력 지연과 프레임 끊김을 줄이는 데 활용할 수 있습니다.