# errorElement

2개의 포스트
post-thumbnail

react-router-dom의 errorElement로 에러 핸들링하기

주문 내역을 확인하는 페이지를 구현하는 도중, 주문 내역이 없으면 400에러가 발생했다. 개발 모드라서 보이는 에러 화면이고 사용자는 빈페이지를 보게 된다. 계좌 관리하는 페이지에서는 계좌가 등록되어 있지 않아도 이런 오류 화면이 뜨지 않는데, api 함수부터가 문제인가 해서 바꾸려고 하다보니 이미 뒤에 짜놓은 로직들이 굉장히 엉켜 손을 댈 수가 없을 것 같았다. errorElement 그러다가 react-router-dom 에서 에러 핸들링 하는 방법이 있는 것을 발견했다. createBrowserRouter로 만든 라우터에만 사용할 수 있다! ![](https://velog.velcdn.co

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

React Router 적용

1. Router란? > 쉽게 정리하면, React Router를 사용하면 보다 빠른 페이지 이동을 가능하도록 도와주는 기능 기존에는 사용자가 링크를 클릭하면 새 페이지에 대한 프로세스가 시작. > a. 브라우저는 웹 서버에서 문서 요청 b. CSS 및 JS 내용을 다운로드 c. 서버에서 보낸 HTML 렌더링 > Router를 사용하면 클라이언트 측 라우팅을 통해 서버에 새로운 문서를 요청하거나, 다음 페이지를 위해 css 및 js를 재평가 할 필요가 없음. 새 정보를 update하고 싶다면, 데이터 요청을 만들어 새 정보로 fetch 후 페이지 업데이트 더 빠른 사용자 경험을 가능하도록 함. ---- 2. Router 설치 ---- 3. React Router API _ createBrowserRouter > **v5 : BrowserRouter -> v6: crea

2022년 12월 1일
·
0개의 댓글
·