componentDidCatch()
2026년 5월 17일
- 생명 주기(Life Cycle) 메서드(Method)이다.
- componentDidCatch, 컴포넌트(Component) 렌더링 도중에 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고 오류 UI를 보여 줄 수 있게 해준다.
JSX
componentDidCatch()
연결된 노트와 함께 읽기
JSX
import { Component } from 'react';
class ErrorBoundary extends Component {
state = {
error: false,
};
componentDidCatch(error, info) {
this.setState({ // state에 error를 true로 설정
error: true
});
console.log({ error, info })
}
render() {
if (this.state.error) { // error가 true 이면
return <div>에러가 발생했습니다!</div>; // 문구를 렌더링
}
return this.props.children; // error가 false이면 children 컴포넌트를 렌더링
}
}
export default ErrorBoundary;