소개
Concurrent Mode는 React 16.0 이상에서 사용할 수 있는 새로운 기능으로, 사용자 인터페이스의 응답성을 향상시키기 위해 개발되었습니다. 이 기능은 기존의 동기식 렌더링 방식에서 비동기식 렌더링 방식으로 전환하는 것을 의미합니다. 이렇게 함으로써 브라우저의 작업 쓰레드가 너무 오래 차단되지 않고 효율적으로 작업을 처리할 수 있게 됩니다.
자바스크립트 스레드 모델
자바스크립트는 기본적으로 싱글 스레드 모델을 가지고 있습니다. 즉, 한 번에 하나의 작업만을 수행할 수 있습니다. 이는 자바스크립트가 동기식으로 동작한다는 것을 의미합니다. 만약 오래 걸리는 작업이 실행되면 브라우저는 그 작업이 완료될 때까지 아무런 다른 작업도 처리할 수 없게 됩니다. 이로 인해 사용자 인터페이스가 멈추거나 응답이 지연되는 현상이 발생할 수 있습니다.
Concurrent Mode의 동작 방식
Concurrent Mode는 렌더링 과정을 여러 단계로 나누어 동작합니다. 이 단계를 “우선순위 단계”라고 부르며, 작업을 여러 개로 분할하여 우선순위에 따라 수행됩니다. 우선순위가 낮은 작업은 우선순위가 높은 작업이 처리될 때까지 대기하게 되며, 이를 통해 브라우저가 작업을 적절히 분산시킬 수 있게 됩니다.
Concurrent Mode는 또한 작업을 중단하고 재개하는 기능도 제공합니다. 이를 통해 사용자 인터페이스의 응답성을 보장하면서 작업을 효율적으로 처리할 수 있습니다.
Concurrent Mode의 장점
Concurrent Mode를 사용하면 다음과 같은 장점을 얻을 수 있습니다.
- 응답성 향상: 우선순위 단계를 사용하므로 작업을 더 빠르게 처리할 수 있습니다. 따라서 사용자 인터페이스의 응답성이 향상됩니다.
- 더 많은 작업을 동시에 처리할 수 있음: Concurrent Mode를 사용하면 다른 작업이 처리되는 동안 대기하던 작업들을 동시에 처리할 수 있습니다. 이로 인해 전반적인 성능이 향상됩니다.
- 애플리케이션의 복잡성 최소화: Concurrent Mode를 사용하면 코드를 더 작은 단위로 분할할 수 있습니다. 이로 인해 애플리케이션의 개발과 유지보수가 훨씬 용이해집니다.
마무리
Concurrent Mode는 React 애플리케이션의 성능을 향상시키는데 중요한 역할을 합니다. 기존의 동기식 렌더링 방식과 비교하여 Concurrent Mode를 사용하면 더 나은 사용자 경험을 제공할 수 있습니다. 만약 React 16.0 이상을 사용 중이라면 Concurrent Mode를 활용해 보는 것을 고려해 보세요.
References:
#react #concurrent #javascript