리액트(ReacJS)의 컴포넌트 라이프사이클API - (3) Unmount API, componentDidCatch를 통한 에러잡기

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻

 

두 번째 Update API에 이어 마지막 Unmount API에 대해 알아보도록 하겠다.

 

컴포넌트의 mount가 해제될 때 관여하는 Unmount api

컴포넌트가 해제될 때 딱 하나의 메소드가 호출된다.

 

componentWillUnmount

자식 컴포넌트에서 사용하며 등록했던 이벤트, 네트워크 요청 취소, 구독 해제 등의 정리 작업을 수행한다.

 

추가) 라이프 사이클을 활용한 에러 잡아내기

 

componentDidCatch

사전에 예외처리를 하지 않은 에러가 발생했을 때 해당 메소드를 사용하여 사용자에게 에러가 발생했다고 알려주는 화면을 보여줄 수 있다. 해당 메소드는 에러가 발생할 수 있는 자식 컴포넌트의 부모 컴포넌트에서 사용한다.

위와 같이 에러가 나지 않은 상태를 false라고 초기화한다. 그러나 자식 컴포넌트에서 에러가 발생하게 되면 componentDidCatch 메소드를 통해 true로 error값을 변경한다. 해당 값을 사용해서 오류 발생 시 다음과 같은 관련 페이지가 나오도록 렌더링 할 수 있다.

 

---

라이프 사이클에 대해 배우고 정리하면서 두루뭉실하게 알고 있던 메소드들이 어떻게 작동하는지 잘 알 수 있게 되었고,마냥 헷갈렸던 리액트에서 컴포넌트의 렌더링 동작이 어떤 흐름으로 진행되는지 조금씩 정확하게 파악할 수 있었다. 또한, 해당 메소드들을 적절히 사용하면 좋은 퍼포먼스를 낼 것을 느꼈기 때문에 이후 진행할 프로젝트들에 많이 적용을 해봐야겠다고 다짐하게 되었다.😎