{intro}
<Spacing size="lg" />
## ErrorBoundary란?
 
ErrorBoundary란 UI 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단하는 문제를 해결하기 위해 도입된 컴포넌트입니다.
이때 ErrorBoundary의 역할은 아래와 같습니다.
 
1. 컴포넌트에서 발생한 에러를 기록
2. 에러가 발생하여 깨진 UI를 대신할 Fallback UI를 렌더링
 
## ErrorBoundary 컴포넌트 만들기
 
ErrorBoundary 컴포넌트를 만들 때는 에러 처리와 관련된 라이프 사이클 메서드를 대신할 hook이 없기 때문에 클래스형 컴포넌트로 만들어야 한다고 합니다. (~~잊고 지내던 클래스형 컴포넌트가 나와 당황스러운 사람~~)
 
클래스형 컴포넌트에는 익숙하지 않아서 <HighlightText type="background" backgroundColor="#e5e5e5">getDerivedStateFromError</HighlightText >와 <HighlightText type="background" backgroundColor="#e5e5e5">componentDidCatch</HighlightText>에 대해서 먼저 알아보겠습니다.
 
- **getDerivedStateFromError** : 정적 메서드로 리액트가 렌더링하는 중 자식 컴포넌트에서 에러가 발생할 때 호출됩니다. **에러 발생 시 상태를 업데이트하여 UI를 렌더링**합니다. 또한 순수 함수이기 때문에 사이트 이펙트 작업(ex:에러 리포팅)은 componentDidCatch를 사용해야 한다고 합니다.
- **componentDidCatch** : 리액트가 렌더링할 때 자식 컴포넌트에서 에러가 발생하면 호출됩니다. 에러 리포팅 등 **사이드 이펙트 작업을 처리**합니다.
 
에러와 관련된 라이프 사이클 메서드도 알아보았으니 이제 ErrorBoundary 컴포넌트 코드를 만들어보겠습니다. 리액트 공식 문서에서 제공하는 코드에 타입을 추가해보았습니다.
 
```tsx
import React, { ReactNode } from "react";

type ErrorBoundaryProps = {
 children: ReactNode;
 fallbackComponent?: ReactNode;
};
type ErrorBoundaryState = {
 hasError: boolean;
};

class ErrorBoundary extends React.Component<
 ErrorBoundaryProps,
 ErrorBoundaryState
> {
 constructor(props: ErrorBoundaryProps) {
 super(props);
 this.state = { hasError: false };
 }
 static getDerivedStateFromError(error: Error): ErrorBoundaryState {
 return { hasError: true };
 }

 componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
 // Sentry와 같은 에러 리포팅 서비스를 사용하여 에러 로그를 남길 수도 있음
 console.error("ErrorBoundary에서 에러가 감지되었습니다.", {
 error,
 errorInfo,
 });
 }

 render() {
 if (!this.state.hasError) {
 return this.props.children;
 }
 if (this.props.fallbackComponent) {
 return this.props.fallbackComponent;
 }
 return (
 <div>
 <h2>Oops, there is an error!</h2>
 <button
 type="button"
 onClick={() => this.setState({ hasError: false })}
 >
 Try again?
 </button>
 </div>
 );
 }
}
export default ErrorBoundary;

```
 
1. ErrorBoundary는 에러를 핸들링할 컴포넌트와 에러 발생 시 보여줄 fallbackComponent를 props로 받습니다.
2. ErrorBoundary 내에서는 hasError state를 사용해 에러 발생 여부를 판단합니다.
3. getDerivedStateFromError 메서드를 사용하여 에러 발생 시 hasError 상태를 true로 변경합니다.
4. componentDidCatch 메서드를 사용하여 에러 발생 시 처리 로직을 구현합니다. 이때 Sentry와 같은 에러 리포팅 시스템을 사용할 수도 있습니다.
5. render 함수에서는 hasError 상태에 따라 UI를 렌더링합니다. 에러가 발생하지 않았다면 child 컴포넌트를 그대로 그려주며, 에러가 발생하였다면 fallback UI를 그려줍니다. 이때 저는 props로 전달받은 fallbackComponent가 있다면 fallbackComponent를, 전달받은 fallbackComponent가 없다면 기본 fallback UI가 그려지도록 해주었습니다.
 
## ErrorBoundary 사용하기
 
이렇게 완성된 ErrorBoundary 컴포넌트를 사용해 보겠습니다.
 
```tsx
<ErrorBoundary fallbackComponent={Something went wrong}>
 <Profile />
</ErrorBoundary>

```
이렇게 Profile 컴포넌트를 ErrorBoundary로 감싸면 Profile 컴포넌트에서 에러가 발생했을 때 fallback UI가 노출되며 해당 에러를 캐치하여 애플리케이션 전체에 영향을 주지 않도록 경계를 만들 수 있습니다.
그렇다면 모든 컴포넌트를 ErrorBoundary로 감싸야 할까요? 리액트 공식 문서는 에러 메시지를 표시하는 것이 합리적인 곳을 고려하라고 합니다. props를 전달받아 화면을 그리는 역할만 한다면 굳이 ErrorBoundary로 감싸지 않아도 됩니다.
 
## 포스팅을 마무리하며
 
이번 포스트에서는 라이프 사이클 메서드를 사용하여 에러를 관리하는 ErrorBoundary 컴포넌트에 대해 알아보았습니다. ErrorBoundary를 통해 일부 컴포넌트에서 발생한 에러가 애플리케이션 전체에 영향을 미치지 않도록 처리할 수 있었습니다. 조금 더 우아한 에러 처리와 fallback UI 제공 등 애플리케이션의 안정성과 사용성을 높이기 위한 방안으로 ErrorBoundary를 사용해 보시는 것을 추천해 드리며 포스트를 마무리하겠습니다 👋👋

ErrorBoundary로 에러 핸들링하기

{intro}
<Spacing size="lg" />
## HOC란?
 
HOC(Higher Order Component, 고차 컴포넌트)란 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수를 의미합니다. 공통으로 적용돼야 하는 로직이 있을 때 컴포넌트 각각에 로직을 추가하는 것이 아니라 공통된 로직을 처리하는 HOC를 통해 코드 재사용성을 높일 수 있습니다. HOC는 함수명이 with로 시작하는 것이 관례입니다.
 
## HOC 만들기
 
로딩 상태에 따라 컴포넌트를 렌더링하는 withLoading HOC를 만들어보겠습니다.
 
```tsx
import { ComponentType, ReactNode } from "react";

const withLoading = <Props extends object>(
 WrappedComponent: ComponentType<Props>
) => {
 const ContainerComponent: React.FC<Props & { isLoading: boolean }> = ({isLoading,...props}) => (
 if (isLoading) {
 return <LoadingComponent/>
 }
 return <WrappedComponent {...props as Props} />
 );

 ContainerComponent.displayName = `withLoading(${
 WrappedComponent.displayName || WrappedComponent.name || "Component"
 })`;

 return ContainerComponent;
};

export default withLoading;
```
 
1. HOC에 감싸질 WrappedComponent를 인자로 받습니다.
2. ContainerComponent는 props를 WrappedComponent에 전달하고 isLoading 값에 따라 컴포넌트를 리턴하는 렌더링 함수입니다.
3. 컴포넌트 식별을 위한 displayName을 설정해 줍니다.
4. ContainerComponent를 반환합니다.
 
이렇게 로딩 상태에 따라 컴포넌트를 렌더링하는 withLaoding HOC를 만들어보았습니다. 앞으로 로딩 관련 처리가 달라지더라도 withLoading 함수만 수정하면 되니 코드 유지보수성도 좋아집니다.
## HOC 사용하기
 
withLoading을 만들었으니 적용해 볼까요?
 

```tsx
//Profile.tsx

const Profile = () => {
 return profile
}

export default withLoading(Profile);
```
 
로딩 처리를 해주고자 하는 컴포넌트를 withLoading의 인자로 넘겨준 후 내보내기 해주면 됩니다 🎉
 
## 포스팅을 마무리하며
 
오늘은 공통된 로직을 재사용할 수 있게 도와주는 HOC에 대해서 알아보았습니다. 공통 로직을 컴포넌트마다 가지고 있을 필요 없이 HOC를 통해 관리하면 코드의 재사용성과 유지보수성 모두 높아지는 것을 알 수 있었습니다.

.css-y59011{position:relative;}.css-y59011::after{content:"";position:absolute;right:0;bottom:0;width:0;height:2px;background-color:var(--color-secondary);-webkit-transition:width 200ms ease-in-out;transition:width 200ms ease-in-out;} ErrorBoundary로 에러 핸들링하기

HOC 사용해서 재사용성 높이기

ErrorBoundary로 에러 핸들링하기