소개

React 18부터는 Concurrent Mode가 도입되었습니다. Concurrent Mode는 React 애플리케이션의 사용자 경험을 향상시키기 위한 새로운 기능입니다. 이전의 동기식 렌더링 방식과 달리, Concurrent Mode는 비동기적인 렌더링을 가능하게 하여 사용자가 제한적인 상호작용과 시간 소요를 경험하지 않고도 더 적응성이 뛰어난 애플리케이션을 구현할 수 있게 해줍니다.

동기식 vs 비동기식 렌더링

이전의 React 버전에서는 동기식 렌더링으로 컴포넌트가 변경될 때마다 전체 애플리케이션을 재 렌더링했습니다. 이는 컴포넌트가 많거나 복잡한 경우에는 성능 저하를 초래할 수 있었습니다.

Concurrent Mode의 도입으로, React는 렌더링 작업을 여러 단계로 나눌 수 있게 되었습니다. 각 단계는 우선순위에 따라 처리되고 중지하거나 재개할 수 있습니다. 이를 통해 React는 필수적인 작업을 우선적으로 처리하고, 사용자의 상호작용 또는 다른 덜 중요한 작업이 발생했을 때 렌더링 작업을 중단하고 다른 작업을 처리할 수 있습니다.

Concurrent Mode의 장점

Concurrent Mode의 가장 큰 장점은 애플리케이션의 반응성을 크게 향상시킬 수 있다는 것입니다. 사용자와의 상호작용이 잠깐의 지연도 없이 즉각적으로 반응하는 애플리케이션을 만들 수 있습니다. 예를 들어, 스크롤 이벤트나 클릭 이벤트 등의 사용자 입력에 대해 빠른 응답이 가능합니다.

또한 Concurrent Mode는 애플리케이션의 성능을 최적화하는 데 도움을 줍니다. 작업을 분할하고 우선순위를 설정하여, 리소스의 효율적인 사용을 가능케 합니다. 이를 통해 사용자 경험을 개선하고, 애플리케이션의 로딩 시간과 응답 시간을 단축시킬 수 있습니다.

자바스크립트 함수 리액티브 프로그래밍

소개

자바스크립트에서 함수 리액티브 프로그래밍은 비동기적인 이벤트 또는 데이터 스트림에 대한 쉬운 처리를 위해 사용됩니다. 이 패턴은 데이터 흐름을 처리하고 변환하는 함수형 프로그래밍의 개념을 기반으로 합니다.

리액티브 프로그래밍의 핵심 개념

스트림(Streams): 연속된 이벤트나 데이터를 의미하는 객체입니다. 예를 들어, 사용자의 마우스 움직임 이벤트나 HTTP 요청 결과와 같은 데이터가 스트림으로 표현될 수 있습니다.
옵저버블(Observable): 데이터를 생산하는 스트림을 나타내는 객체입니다. 이벤트 또는 비동기적인 데이터를 방출하는 옵저버블을 생성하고, 옵저버들이 이를 구독하여 해당 데이터를 처리할 수 있습니다.
옵저버(Observers): 옵저버는 옵저버블을 구독하여 새로운 이벤트나 데이터가 발생할 때 알림을 받는 객체입니다. 옵저버는 옵저버블이 생성한 데이터를 받아 처리합니다.
연산자(Operators): 옵저버블에 대한 변환, 필터링 또는 조작을 수행하는 함수입니다. 연산자를 사용하여 옵저버블의 데이터를 원하는 형태로 가공할 수 있습니다.

함수 리액티브 프로그래밍의 장점

비동기 코드를 간결하고 읽기 쉽게 작성할 수 있습니다.
코드의 가독성과 유지 보수성을 향상시킵니다.
복잡한 비동기 작업을 간단한 함수 체인으로 표현할 수 있습니다.

자바스크립트에서 함수 리액티브 프로그래밍을 구현하기 위해 RxJS와 같은 라이브러리를 사용할 수 있습니다.

참고자료:

#hashtags: #ConcurrentMode #FunctionReactiveProgramming