동시성 렌더링
-
[React] Concurrency(동시성) - #4. Transition APIFront-End(Web)/React - 프레임워크(React, Next) 2022. 11. 3. 04:45
지난 포스팅에서 React 18의 주요 컨셉인 Concurrent Rendering(동시성 렌더링) 을 정리하였다. (포스팅) [React] Concurrency(동시성) - #3. Concurrent Rendering 🧐 서론 지난 포스팅에선, , 를 통한 Loading UI, 를 통한 Error UI 등에 대해 알아보았다. 하지만, 이런 로딩화면도 사용자에게 답답함을 줄 수 있기에, React는 좀 더 UX 친화적인 렌더링 방식을 제공하 abangpa1ace.tistory.com 이번 포스팅은 이를 실제로 구현하는 기능인 Transition API 들에 대해 정리하려고 한다. Hooks 들의 사용법들을 확인할 뿐만 아니라, 이들을 통해 기존의 Suspense(로딩) 방식에서 UX적으로 어떻게 나아지는..
-
[React] Concurrency(동시성) - #3. Concurrent RenderingFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 27. 20:19
🧐 서론 지난 포스팅에선, , 를 통한 Loading UI, 를 통한 Error UI 등에 대해 알아보았다. 하지만, 이런 로딩화면도 사용자에게 답답함을 줄 수 있기에, React는 좀 더 UX 친화적인 렌더링 방식을 제공하려고 한다. Concurrent Rendering(동시성 렌더링)는 React 18버전이 릴리즈되면서 가장 강조하고 있는 컨셉이다. 정확히는, Parellel(병렬)이 불가능한 Javascript의 싱글 스레드 환경에서, 최대한 이와 비슷한 Concurrency(동시성)을 구현하는 것이다. React 18에 출시된 Transition API들을 통해 동시성 렌더링을 구현할 수 있으며, 이러한 환경을 앞으로 더욱 보장할 계획이라고 한다. * React 18 변경점(포스팅) : https..
-
[React] Concurrency(동시성) - #1. Suspense와 React.lazyFront-End(Web)/React - 프레임워크(React, Next) 2022. 10. 24. 02:53
🧐 서론 전 회사분들과 진행하는 스터디에서 나는 Suspense와 React.lazy를 통한 코드 스플리팅 부분을 맡게 되었다. Suspense에 대해서만 공부하려고 했다가, Error Boundary나 Transition API 등 관련된 기능들을 함께 공부하면서 Concurrent Rendering(동시성 렌더링)까지 공부하게 되었다. 첫 번째 주제는 선언적 Loading UI와 Code Splitting(코드 분할)을 위한 Suspense와 React.lazy부터 시작된다. 기존의 비동기 렌더링 분기를 어떻게 사용했는지 알아보고 이것이 동시성 모드에서 어떻게 변화하려고 하는지 로 시리즈를 전개하려고 한다. 💙 Code Splitting(코드 분할) Suspense와 React.lazy를 바로 정리하..