# React18
Suspense를 사용해서 Race Condition, Waterfall 문제 해결하기
React에서 Suspense가 트렌드가 된 건 아무래도 React 18버전부터 아닐까 생각됩니다. 이번시간에는 Suspense를 사용해서 Race Condition, Waterfall 문제를 해결하는 방법에 대해 알아보도록 하겠습니다.
patch-package를 사용하여 create-react-app 에서 리액트 18 버전 react-dnd에서 발생하는 컴파일 에러(./jsx-runtime.js is not exported from package) 해결하기
create-react-app 에서 리액트 18버전으로 업그레이드를 하려고 하니 아래와 같은 에러에 맞닦뜨렸다.react-dnd 깃헙 상에도 오픈 이슈로 진행중인 상태이지만 아직 패치된 버전은 릴리즈 되지 않은 상태다.https://github.com/reac
Concurrent Rendering (2)
개요 useDifferedValue, useTransition 이들의 공통점과 차이점 (+debounce) useDifferedValue, useTransition의 공통점은 비싼 렌더링 연산에 대한 문제를 해결할 때 사용한다. 차이점이 궁금하다면 본문을 읽어보자. Suspense Suspense는 비싼 렌더링 연산의 fallback renderin...
[Frontend] Lazy Loading, Suspense 그리고 SSR
Suspense, lazy loading을 통한 성능 개선 및 React18에서 SSR에 대한 기능 추가에 관련된 글입니다.
React18의 strictMode와 react-beatiful-dnd
현재 진행하고 있는 프로젝트에서 DND 기능을 다시 만들어볼 기회가 생겼는데, 계속해서 DroppableId를 찾지 못하는 에러가 발생했다.TR&DRrequestAnimationFrame을 불러 paint 이후에 Droppable을 등록하면 StrictMode를 해제하
[React] 공식 블로그 러버덕
🤔 공식 블로그를 읽게 된 계기? 최근 2주간 러버덕 중심으로 Be real FE 스터디 친구들과 공부하고 있다. 이번에는 Event Handler html에 달렸었는데 어떠한 이슈로 가장 가까운 div?에 달리도록 Event Pooling 이전에는 이벤트 풀링을
프론트엔드 성능 최적화
최적화 프론트엔드 측정 가능 성능 : 로딩시간(로딩), 렌더 시간(렌더링), 메모리누수(메모리) 3가지 로딩속도 측정 기준 FCP(First Contentful Paint) : 첫 요소가 로드 될 때까지 걸리는 시간 FMP(First Meaningful Pain
React18 - Automatic Batching, Transition
New Root API Automatic Batching useTransition
React 18: concurrency
Concurrency는 그 자체로는 기능이 아니다. 동시에 ui의 다양한 버전을 준비하게 해준다. Concurrent React는 전형적인 구현 디테일보다 중요하다. 모델을 렌더링하는 리액트의 코어의 기초적인 업데이트다. 그렇기 때문에 Concurrency가 높은 가
React 18 strict mode에서 double mount로 인한 axios 중복 호출 막기 두번째 방법! (with AbortController)
앞선 포스팅에서는 didMount라는 state값을 선언해서 중복 호출을 막는 방법을 제시했는데 실제 axios를 사용해서 작성하다 보니 unmount가 될 때 axios 호출을 취소하는 방법을 사용하는 것이 더 좋은 방법처럼 보여서 시도해 보았다.axios에 abor
React 18 strict mode 에서 api 호출 두번 되는 문제 해결하기! (StrictMode 제거 없이)
사연 react로 개인 프로젝트를 하는 와중에 api를 호출하는 부분이 들어갔는데, 컴포넌트가 두 번씩 렌더링 되면서 api도 두번씩 호출되는 상황이 발생하였다 ㅠㅠ 전개 일단 google에 react 18 render twice를 검색했고 관련한 여러가지 블로그 글
batch, useTransition, useDeferredValue
react 18 새로운 기능batch state 변경 함수들이 여러개 있을 때 마지막에 한번만 재 렌더링이 된다 useTransition , useDeferredValue
React Hooks - useTransition()
useTransition의 등장배경 렌더링 과정에서의 Blocking rendering 문제를 해결하기 위해 React18 버전에서 새로운 훅이 등장했다. Blocking rendering이란 한번 렌더링연산이 시작되면 멈출 수 없는 문제이며 처리할 것이 많은 화면을
NextJs에 React18 Suspense 적용하기 (with react-query 적용)
🚪 들어가기 React Suspense는 React 16에서 릴리즈된 기능이다. React 18에서는 추가된 기능을 제공하고 있고 Error Boundary와 합친 기능으로도 사용할 수 있다고 하여 적용해보려한다. 이 글에서는 React 16에서의 Suspense와
React Suspense
프론트엔드 어플리케이션에서 데이터 로딩을 관리하는 것은 점점 어려워지고 있다. 이러한 이유 때문에, 프론트엔드 생태계의 다양한 상태관리 라이브러리들이 등장했따.React팀은 이러한 문제를 인지하고 있었고, Suspense는 React 컴포넌트의 Loading state