try/catch : 렌더링중에 발생하지 않는 이벤트 핸들러에서의 에러처리

try/catch를 나는 사용한 적은 없고, 항상 남이 사용하는 것을 유지보수 하기만 했다.

 

대충 에러처리를 위한 코드라는 것을 주워듣긴 했지만 이번에 공식문서에 들어가서 확인해보았다.

 

리액트의 이벤트핸들러

리액트의 이벤트핸들러는 렌더링중에 발생하지 않는다.

 

즉 이벤트 핸들러에서 문제가 생겨도 리액트는 여전히 화면에 무엇을 표시해야 할 지 알고 그 행위를 위해 작동한다.

 

이벤트핸들러 내에서 문제가 발생해도 계속 작동 => 잘못된 화면이 렌더링 될 수 있음

 

때문에! 이벤트핸들러 내에서 에러를 잡아야 하는 경우 try/catch구문을 이용하라고 공식문서에서 이야기한다.

 

  const handleSubmitCodeProblem = async () => {
    try {
      //로직
    } catch (error) {
      //try중간에 에러가 발생하면 바로 catch가 실행된다.
      //토스트로 에러처리
      toastMessage.error('제출과정에 문제가 있습니다.');
    }
  };

---

try/catch 문서는 여기