React 18
-
[React Query] (6) Suspense와 Error Boundary 적용Front-End(Web)/React - 라이브러리들 2022. 11. 3. 04:46
🧐 서론 지난, React 18의 Concurrency(동시성)을 시리즈로 포스팅하면서 비동기의 선언적 로딩인 Suspense와 에러처리인 Error Boundary 에 대해 알아보았다. * Suspense(위, 링크), Error Boundary(아래, 링크) [React] Concurrency(동시성) - #1. Suspense와 React.lazy 🧐 서론 전 회사분들과 진행하는 스터디에서 나는 Suspense와 React.lazy를 통한 코드 스플리팅 부분을 맡게 되었다. Suspense에 대해서만 공부하려고 했다가, Error Boundary나 Transition API 등 관련된 기능 abangpa1ace.tistory.com [React] Concurrecy(동시성) - #2. Error B..
-
[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를 바로 정리하..
-
[Next.js] Next.js 12 변경사항Front-End(Web)/React - 프레임워크(React, Next) 2022. 9. 1. 19:34
🤔 서론 작년 10월, Next.js 12버전이 빠르게 릴리즈되었고 컴파일러를 기존 Babel에서 Rust 기반의 SWC로 바꾸면서 빌드 속도가 대폭 상향됬다는 걸 알게되었다. 좀 더 알아보니, 이 뿐만 아니라 최근에 릴리즈된 React 18의 기능들을 지원하기 위한 업데이트도 포함된 것을 확인했다. 이번 기회에, 최근 Next가 12버전으로 업데이트 되면서 어떠한 변화들이 있었는지 한 번 정리해보려고 한다. 🤍 Next.js 12 업데이트 2021년 10월, 11버전이 업데이트된지 약 3달만에 Vercel(Next 개발사)은 다시 12버전을 발표하게 된다. 이번 배포는 개발자 경험(DX, Developer Experience)을 향상시키는 기능, React 18 업데이트 등에 초점이 맞춰져있다고 한다...
-
[React] React 18 의 달라진 점들Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 18. 01:15
올해 3월, React v18.0 이 정식 릴리즈가 되었다. (2020년 10월, v17.0 이 릴리즈된지 약 1년반) 업데이트 소식과 베타버전은 작년부터 리포트 되어왔으며, 최근 정식 릴리즈됨에 따라 이 포스팅을 한 번 정리하면 좋겠다는 생각이 들었다. 지난 React v17.0 은 호환성, 안정화 정도의 간단한 업데이트라면, v18.0은 주요 기능들이 많이 추가되어 이례적으로 작년에 알파버전까지 릴리즈하기도 했다. 이번 기회를 통해 React를 버전업하는 방법, 그리고 이번에 추가된 주요 기능들에 대해 알아보도록 하겠다! 💙 React 18 시작하기 이번 React 18 버전에서 추가된 주요기능은 크게 아래 3가지로 소개된다. automatic batching : 여러 개의 상태 업데이트를 한 번에 ..