<aside> <img src="/icons/bookmark_purple.svg" alt="/icons/bookmark_purple.svg" width="40px" />

목차

</aside>

Room 컴포넌트에서, 방 중복 입장 시 에러페이지를 나타낼 때, 에러 Catch하는 Wrapper로 감싸고, 내부에서 조건을 충족시키지 않을 경우 throw, 래퍼에서 잡아서 처리해주면 에러처리 로직이 간단해지고 층을 나눌 수 있지 않을까? 싶어 시도해봤다.

그러나.. 실패!!

알아보니 리액트에서의 에러는 일반적인 try-catch문으로 잡을 수 없다고 한다. Error Boundary가 필요한 이유도 그것이라고 한다. 그러나 일반적인 상태 처리로 둘 수도 없는 게,

방 입장 검사 시

(1) 중복 여부

(2) 방 존재 여부(useParticipants)

순서로 발생하고, (1)에서 문제가 있을 경우 (2)도 호출해선 안되기 때문이다. (1)에서 바로 멈춰줘야 한다. 이런 건 상태로 처리하긴 어렵고, 어차피 에러 처리를 해주는 래퍼인 에러 바운더리를 추가하면 안정성이 올라가므로 그냥 에러로 던지고, 에러 바운더리도 추가하기로 했다!

에러 바운더리, 함수형에선?

그러나 문제는 일반적인 에러 바운더리는 클래스형 컴포넌트라는 점이다. 함수형 컴포넌트로만 작성된 코드에 끼워넣으면 이질감이 든다. 함수형으로 작성할 방법은 없을까? 다행히도 찾아보니 바로 방법을 찾을 수 있었는데, react-error-boundary 라이브러리를 사용하는 것이다!

import { RoomAlreadyEnter, RoomNotFoundError, RoomDefaultError } from '@/components';
import { roomError } from '@/constants/roomError';
import { EmotionJSX } from 'node_modules/@emotion/react/types/jsx-namespace';
import { ErrorBoundary } from 'react-error-boundary';

interface RoomCatchWrapperProps {
  children: React.ReactNode;
}

const fallbackRender = ({ error }) => {
  const ErrorComponent = exceptionComponentMap[error.message] || RoomDefaultError;
  return <ErrorComponent />;
};

const RoomCatchWrapper = ({ children }: RoomCatchWrapperProps) => {
  return <ErrorBoundary fallbackRender={fallbackRender}>{children}</ErrorBoundary>;
};

const exceptionComponentMap: Record<keyof typeof roomError, () => EmotionJSX.Element> = {
  RoomNotFound: RoomNotFoundError,
  RoomAlreadyEnter: RoomAlreadyEnter
};

export default RoomCatchWrapper;

사용 방법은 위와 같이 간단했다.

그런데 문제가 또다시 발생했으니..?!