React 에서 Portals 와 오류 경계 처리 실현
슬롯 이 라 고 할 수 있 지만 Vue 의 slot 와 는 다 릅 니 다.React 요 소 를 지정 한 용기(실제 DOM)에 렌 더 링 하 는 것 을 말 합 니 다.
예 를 들 어 Modal 구성 요 소 는 기본적으로 body 의 실제 구조의 하위 요소 로 렌 더 링 됩 니 다.그러면 우 리 는 ReactDOM.createPortal(ReactElement,RealDOM container)을 통 해 React 요소,예제 코드 를 만 들 수 있 습 니 다.
import React from 'react'
import ReactDOM from 'react-dom'
import Modal from './components/Modal'
const PortalModal = ReactDOM.createPortal(<Modal />, document.body)
export default function App() {
return <div className="app-container">
<PortalModal />
</div>
}
브 라 우 저 콘 솔 에서 볼 수 있 습 니 다.실제 Modal 구성 요 소 는 body 의 직접 하위 요소 로 렌 더 링 되 었 지만 React 개발 자 도 구 를 통 해 Modal 구성 요 소 는 가상 DOM 트 리 의 구조 에서 App 구성 요소 에 있 고 app-container 라 는 div 에 있 습 니 다.그래서 우 리 는 React 구성 요소 가상 DOM 트 리 구조 와 실제 DOM 트 리 구 조 는 일치 하지 않 을 수 있다 는 결론 을 얻 을 수 있다.
따라서 사건 의 거품 에 주의해 야 한다.
오류 경계 처리
기본 적 인 상황 에서 하나의 구성 요소 가 렌 더 링 기간(render)에 오류 가 발생 하면 전체 구성 요소 트 리 가 모두 마 운 트 해제 됩 니 다.
오류 경계:렌 더 링 기간 에 하위 구성 요소 에서 발생 하 는 오 류 를 캡 처 하고 부모 구성 요소 에 계속 전 파 를 막 을 수 있 는 구성 요소 입 니 다.
어떤 구성 요소 가 오 류 를 포착 하도록 합 니 다(클래스 구성 요소):
정적 방법 static getDerivedStateFromError 를 사용 하면 하위 구성 요소 렌 더 링 오류 가 발생 할 때 이 함수 가 실 행 됩 니 다.
import React, {PureComponent} from 'react'
export default class ErrorBoundary extends PureComponent {
state = {
isError: false
}
static getDerivedStateFromError(error) {
console.log('Rendering Error: ', error)
return {
isError: true
}
}
render() {
if (this.isError) {
return <span>Something Wrong...</span>
}
return this.props.children
}
}
componentDidCatch(error,info)함수 사용 하기
import React, {PureComponent} from 'react'
export default class ErrorBoundary extends PureComponent {
state = {
isError: false
}
componentDidCatch(error, info) {
// info
console.log('Rendering Error: ', error)
console.log('Rendering info: ', info)
this.setState({
isError: true
})
}
render() {
if (this.isError) {
return <span>Something Wrong...</span>
}
return this.props.children
}
}
잘못된 경 계 를 사용 하지 않 았 다 면 어떻게 되 었 을 까?React 16 부터 오류 경계 에 포착 되 지 않 은 오류 가 발생 하면 React 구성 요소 트 리 전체 가 마 운 트 해제 됩 니 다.
경험 치 는 오류 UI 를 유지 하 는 것 보다 완전히 제거 하 는 것 이 더 좋다 는 것 을 알려 준다.예 를 들 어 Messenger 와 유사 한 제품 에서 이상 한 UI 를 사용자 에 게 보 여주 면 사용자 가 다른 사람 에 게 정 보 를 잘못 보 낼 수 있다.
오류 경 계 를 늘 리 면 응용 프로그램 에 이상 이 발생 했 을 때 더 좋 은 사용자 체험 을 제공 할 수 있 습 니 다.예 를 들 어 페 이 스 북 Messenger 는 사 이 드 바,정보 패 널,채 팅 기록 과 정보 입력 상 자 를 단독 오류 경계 에 포장 합 니 다.일부 UI 구성 요소 가 무 너 지면 나머지 부분 은 상호작용 을 할 수 있 습 니 다.
주의 점
일부 오류,오류 경계 구성 요소 가 캡 처 되 지 않 습 니 다.
자체 구성 요소 오류
비동기 오류(예 를 들 어 setTimeout 에서 던 진 오류)
import React, {PureComponent} from 'react'
// ErrorBoundary.jsx
export default class ErrorBoundary extends PureComponent {
state = {
isError: false
}
/* */
static getDerivedStateFromError(error) {
console.log('Rendering Error: ', error)
return {
isError: true
}
}
render() {
if (this.isError) {
return <span>Something Wrong...</span>
}
return this.props.children
}
}
// Comp.jsx Comp
export default funtion Comp() {
setTimeout(() => {
throw new Error('setTimeout error')
}, 1000)
return <div>Comp</div>
}
// App.jsx
export default function App() {
return <>
<ErrorBoundary>
<Comp />
</ErrorBoundary>
</>
}
이벤트 에서 던 진 오류렌 더 링 서브 구성 요소 만 처리 하 는 동안 동기 화 오류
React 에서 Portals 와 오류 경계 처리 가 이 루어 진 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 React Portals 와 오류 경계 처리 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.