Page 26 -

7.2.8 componentWillUnmount 메서드

componentWillUnmount() { ... }

이것은 컴포넌트를 DOM에서 제거할 때 실행합니다. componentDidMount에서 등록한 이벤트, 타
이머, 직접 생성한 DOM이 있다면 여기서 제거 작업을 해야 합니다.

7.2.9 componentDidCatch 메서드

componentDidCatch 메서드는 리액트 v16에서 새롭게 도입되었으며, 컴포넌트 렌더링 도중에 에
러가 발생했을 때 애플리케이션이 먹통이 되지 않고 오류 UI를 보여 줄 수 있게 해 줍니다. 사용
방법은 다음과 같습니다.

componentDidCatch(error, info) {
this.setState({
error: true
});
console.log({ error, info });
}

여기서 error는 파라미터에 어떤 에러가 발생했는지 알려 주며, info 파라미터는 어디에 있는 코
드에서 오류가 발생했는지에 대한 정보를 줍니다. 앞의 코드에서는 그저 console.log만 했지만,

나중에 실제로 사용할 때 오류가 발생하면 서버 API를 호출하여 따로 수집할 수도 있습니다.
그러나 이 메서드를 사용할 때는 컴포넌트 자신에게 발생하는 에러를 잡아낼 수 없고 자신의

this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다는 점을 알아
두어야 합니다. 이 메서드를 사용하는 방법은 7.3.3절 ‘에러 잡아내기’에서 알아보겠습니다.

178

리액트를 다루는 기술_개정판(본문)최종출력용.indb 178 2019-08-20 오전 11:03:03