React Concurrent Mode는 React의 새로운 기능 중 하나로, 사용자 경험을 향상시키기 위해 비동기 렌더링을 지원하는 기능입니다. 이 기능은 자바스크립트 프리렌더링을 통해 페이지가 보여지는 속도를 빠르게 만들어줍니다.

자바스크립트 프리렌더링이란?

자바스크립트 프리렌더링은 페이지를 처음 로드할 때, HTML 문서를 파싱하는 동안 필요한 자바스크립트 파일들을 미리 다운로드하고 실행하는 기법입니다. 이를 통해 사용자가 실제로 페이지를 보기 시작하기 전에 필요한 자바스크립트 코드를 미리 가져올 수 있어 페이지 로딩 속도를 향상시킬 수 있습니다.

React Concurrent Mode에서의 자바스크립트 프리렌더링

React Concurrent Mode에서는 자바스크립트 프리렌더링이 사용자 경험을 향상시키는 데 도움이 되는 방식으로 활용됩니다. 예를 들어 대규모 앱에서 많은 컴포넌트가 렌더링되는 경우, 초기 로딩 시에 모든 컴포넌트를 한 번에 렌더링하면 사용자가 페이지를 처음으로 볼 때까지 오랜 시간이 걸릴 수 있습니다.

React Concurrent Mode에서는 이런 문제를 해결하기 위해 컴포넌트의 부분 렌더링을 지원합니다. 즉, React Concurrent Mode는 뷰포트에서 실제로 보이는 컴포넌트만을 우선적으로 렌더링하고, 나머지 컴포넌트들은 비동기적으로 백그라운드에서 렌더링되도록 합니다. 이를 통해 초기 로딩 속도를 개선하고 사용자가 더 빠르게 페이지를 볼 수 있게 해줍니다.

React Concurrent Mode를 사용하면 자바스크립트 프리렌더링이 자동으로 적용되며, 추가적인 설정이 필요하지 않습니다. 기존의 React 앱을 Concurrent Mode로 업그레이드하면 자동으로 이 기능을 활용할 수 있습니다.

React Concurrent Mode는 아직 실험적인 기능이기 때문에, 전체 앱에서 사용하기보다는 특정 부분에 적용하는 것이 좋습니다. 이를 통해 앱 전체 성능에 영향을 주지 않고 일부분에만 적용할 수 있습니다.

React Concurrent Mode의 자바스크립트 프리렌더링 방식은 사용자 경험을 향상시키는 강력한 기능입니다. React 앱을 업그레이드하여 이 기능을 적용해 보는 것을 추천합니다!

참고 자료

• React Concurrent Mode 공식 문서: https://reactjs.org/concurrent

• React Concurrent Mode 소개 포스트: https://blog.bitsrc.io/introducing-react-concurrent-mode-25d79e4aa95b

#React #ReactConcurrentMode