# Suspense

90개의 포스트
post-thumbnail

[번역] Async rendering in React: Suspense, Hooks, and other methods_02

React Suspense 사용법_02

2023년 11월 17일
·
0개의 댓글
·
post-thumbnail

[번역] Async rendering in React: Suspense, Hooks, and other methods_01

React의 Suspense에 대해 알아보자.

2023년 11월 16일
·
0개의 댓글
·

Suspense API

Suspense API는 React에서 컴포넌트의 로딩 상태를 관리할 수 있게 해주는 기능이다. 어떤한 데이터가 가져와질 때까지 컴포넌트의 렌더링을 중단(Suspend)하고 그 동안 대체 UI를 표시할 수 있는 방법을 제공한다. 비동기 데이터 로딩을 처리하고 React

2023년 11월 15일
·
0개의 댓글
·

Suspense가 promise를 캐치하는 방법

React의 Suspense는 컴포넌트 내부의 비동기 로직이 완료될 때까지 로딩 표시나 대체 컨텐츠를 보여줄 수 있는 기능을 제공한다. Suspense는 주로 React.lazy()와 같은 코드 분할 또는 비동기 데이터 로딩과 같은 시나리오에서 사용된다.Suspens

2023년 10월 31일
·
0개의 댓글
·
post-thumbnail

React, Next.js에서의 Suspense

Suspense 총정리

2023년 10월 26일
·
0개의 댓글
·
post-thumbnail

React Suspense

Suspense란?React18에서 Suspense를 다루는 문서를 찾아보면 Suspense의 정의에 대해서라고 합니다. Suspense는 아직 컴포넌트가 표시 될 준비가 되지 않았을 때, 렌더링 되어야 할 부분을 선언적으로 정의 할 수 있게 해주는 컴포넌트입니다. S

2023년 10월 21일
·
0개의 댓글
·
post-thumbnail

React - Suspense

Suspense와 lazy를 학습하고 적용하여 비동기 처리 로직을 단순화하고 성능을 개선해보자.

2023년 10월 16일
·
0개의 댓글
·

Suspense의 동작 원리

Suspense를 사용하면 컴포넌트가 렌더링하기 전에 다른 작업이 먼저 이루어지도록 “대기" 해주는 기능을 제공합니다. 즉 Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되

2023년 10월 9일
·
0개의 댓글
·
post-thumbnail

[React] Suspense의 동작 원리

children을 위한 Suspending

2023년 9월 30일
·
0개의 댓글
·
post-thumbnail

초간단 비동기 렌더링 React Suspense(By. Boaz) 정리

💡 해당 글은 유튜브 "가장 쉬운 웹개발 with Boaz"의 "초간단 비동기 렌더링 React Suspense"를 보고 정리한 글입니다. 문제 시 삭제합니다!

2023년 9월 29일
·
0개의 댓글
·
post-thumbnail

데이터를 요청하는 동안 Suspense로 로딩 화면 구현하기

Suspense 컴포넌트로 하위 컴포넌트 렌더링이 끝날 때까지 로딩 화면을 보여주기

2023년 9월 27일
·
0개의 댓글
·
post-thumbnail

React, Next.js | Suspense

♻️ 실제 콘텐츠가 로딩되는 동안 보여주는 대체 콘텐츠suspense를 사용하면 스켈레톤 및 스피너와 같은 로딩 표시기를 pre-rendering 할 수 있다.로딩시간이 길어질동안 사용자가 흰 화면만 보고 있는 것이 아닌,loading의 의미를 나타내는 UI를 보여주는

2023년 9월 14일
·
0개의 댓글
·
post-thumbnail

React.lazy와 @loadbale/component의 차이점

리액트로 진행한 프로젝트을 라이트하우스로 돌려봤고 그 중 나온 권장 사항이 사용하지않는 자바스크립트 줄이기였다. 해당 글에서는 위의 이미지와 같이 리액트에서는 code-split을 추천했고 React.lazy()를 사용하기로 했다. 기존 코드수정된 코드이렇게 코드를

2023년 9월 12일
·
0개의 댓글
·
post-thumbnail

Next.js 13 - streaming SSR + Suspense

직접 만들어본다면? 이런식으로 간단하게 과정을 설명할 수 있다.관련 이슈: SSR에 대한 제한된 동시성. 성능 이슈 => react 18에서는 어떻게 해결하려 하는지 (streaming SSR)ReactDOMServer.renderToString API의 제한된 동시성

2023년 9월 2일
·
0개의 댓글
·
post-thumbnail

React18 <Suspense> 는 단순한 로딩 컴포넌트가 아니다? with SSR

React18 <Suspense> 는 단순한 로딩 컴포넌트가 아니다?!

2023년 8월 28일
·
0개의 댓글
·
post-thumbnail

08.23 React.lazy, Suspense

큰 React 어플리캐이션은 많은 구성 요소, 유틸리티 및 라이브러리로 구성이 되어있다.만약, 필요할 때만 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드할 시 Javascript 번들이 사용자에게 전송이 되는데, 이는 페이지 성능에 상당한 영향을 줄

2023년 8월 24일
·
0개의 댓글
·
post-thumbnail

[E-commerce PJT]_기본 세팅 및 스켈레톤 페이지 생성하기 - 1

⭐ 사이드 프로젝트 시작 말은 E-commerce PJT 라고 거창하지만, 그냥 쇼핑몰 웹사이트를 만들어 보는 것이다. 다만 최대한 백엔드와 프론트엔드 모두를 구현해보려고 한다. 이번에 현대오토에버 이커머스에 지원하면서, 이커머스에 지원했지만... 해당 도메인과 관련된

2023년 8월 23일
·
2개의 댓글
·
post-thumbnail

[React] 성능 향상을 위한 코드 분할하기(React.lazy, Suspense)

현재 진행하고 있는 프로젝트의 규모가 커지면서, 애플리케이션의 모든 컴포넌트를 한 번에 로드하는 방식으로 인해 성능 저하 문제가 발생하고 있을 수도 있다는 생각에 Lighthouse 도구를 통해 검사한 결과,아래와 같이 사용되지 않는 로고와 함께 당장 보여줘도 되지

2023년 8월 14일
·
1개의 댓글
·