# errorBoundary

Error Boundary
React는 16버전부터 컴포넌트에서 발생하는 에러를 기록하며, 깨진 컴포넌트 대신 fallback UI를 보여주는 ErrorBoundary라는 개념을 도입하였습니다.ErrorBoundary를 통해 컴포넌트에서 에러가 발생했을 때, 이를 캐치하고, 사용자들에게 에러가

React Suspense + ErrorBoundary 개념과 활용
개인 학습용으로 정리한 글입니다.Suspense는 children의 로딩이 완료될 때까지 다른 컴포넌트를 대신 보여줄 수 있게 해준다. REST API와 같이 비동기로 데이터를 가져오는 작업에서 활용도가 높다.어떤 컴포넌트가 필요한 데이터가 아직 준비가 되지 않은 상태

사용자 경험 개선을 위한Concurrent UI Pattern
프론트엔드에서 실무경험을 하며 사용자 경험(UX)가 얼마나 중요한 지 깨닫게 되고있다. 데이터를 페칭해오는 시간 동안 UX를 개선하기 위해 개발자들은 많은 고민을 하고있다.그것에 대해 공부하던 도중 React Query와 함께 Concurrent UI Pattern을

React 비동기 처리와 성능 향상(feat. lazy, Suspense, ErrorBoundary)
BilliG 프로젝트에서 API 통신으로 데이터를 fetching 할 때, 리액트쿼리의 useQuery를 통해 isLoading, isError를 받아와 컴포넌트 내에서 비동기처리 로직을 작성했었다. 이렇게 작성한 코드가 올바른 방법인지에 대해 코치님들께 질문을하였고
[React] 프론트엔드 에러 핸들링 1편 ( with. ErrorBoundary )
안녕하세요 HP 입니다 :) 오늘은 React ErrorBoundary공식 문서를 활용하여 프론트엔드에서 에러 핸들링을 하는 방식에 대해서 얘기해보겠습니다. 📚 개념 리액트에서는 ErrorBoundary를 아래와 같이 설명하고 있습니다. 자바스크립트 에러가 전체
ErrorBoundary with React Query
레벨로그 프로젝트 상황에 맞는 에러처리 같은 API를 통해 응답을 받아오더라도 상황에 맞는 에러처리가 필요하다. 예를 들어 A라는 콘텐츠가 있다고 생각해보자. A라는 콘텐츠가 주가 되는 화면이 있다. 이 화면에서는 A의 API 응답에 에러가 오면 에러 페이지로 리다
React ErrorBoundary를 사용하여 에러 처리 개선하기 (with react-query)
에러가 발생하면 개발자들은 개발자 도구를 열어 에러 내용을 확인할 수 있지만 사용자에게 무엇이 잘못된지 알 수 없고 또한 어플리케이션의 모든 작업이 중단되어 좋은 경험을 줄 수 없다. 따라서 우리는 적절히 에러를 핸들링해 줘야 한다.
ErrorBoundary
react 에서 에러를 처리하기 위해서 ErrorBoundary를 사용하면 된단다.에러 경계(Error Boundaries)react-error-boundary그런데이 내용을 꼼꼼히 보지 않아서 원하는 대로 fallback 페이지를 보여주지 못하는 문제가 있었다.그래서

[패스트 캠퍼스 FE] 리액트 맛보기 - 4
1️⃣ 리액트 Element에 스타일 입히기2️⃣ Ref로 DOM 다루기3️⃣ Form 다루기4️⃣ Error 다루기이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!잔여 연산자➡️ 입력받는 값들을 모두 태그 안에 설정해줌특정 DOM을
[REACT] 에러바운더리에서 에러가 잡히지 않는 경우
최종 수정일 : 2022-03-24https://ko.reactjs.org/docs/error-boundaries.html명령형 대신 선언형으로 에러를 처리하기 위해 회사에서 쓰고 있다.명령적 해결 - https://wani.kr/posts/2015/

[KDT]FCFE - 7주4일 React ( Hooks )
React Hooks hooks 이전 컴포넌트 내부에 상태가 있다면? class 컴포넌트 내부에 상태가 없다면? 라이프사이클을 사용해야 한다면? class 라이프사이클에 관계 없다면? function class component function comp

에러핸들링의 중앙 집중화 [Errorboundary 와 리덕스]
리덕스와 에러바운더리를 통한 에러집중화를 통해 모든 에러를 로깅하고 사용자에게 전달해보자! 사용자와 확인창을 통해 대화를 해보자.

[React] ErrorBoundary 사용하여 에러 핸들링 하기
📌 Intro React는 16 버전부터 앱의 하위 컴포넌트 트리에서 발생하는 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 ErrorBoundary라는 개념을 도입하였다. ErrorBoundary를 통해 컴포넌트에서 에러가 발생했을

[React] 9. 라이프사이클 메서드
1. 라이프사이클 메서드 정리 ✍ 1.1 render() 함수 라이프사이클 메서드 중 유일한 필수 메서드이다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 예를 들어, div 태그, 컴포넌트 등 주의할점❗