질문
React의 Suspense와 Error Boundary를 사용하여 비동기 데이터 로딩 중 발생할 수 있는 오류와 로딩 상태를 어떻게 관리할 수 있는지 설명하세요. Suspense와 Error Boundary를 적절하게 결합하여 사용자 경험을 개선하기 위한 전략을 설명해주세요.
질문의도
로딩 상태와 에러 상태를 어떻게 적절히 처리하여 사용자 경험을 개선할 수 있는지, 그리고 두 기능을 결합해 애플리케이션의 안정성과 반응성을 높일 수 있는 전략을 설명할 수 있는지를 확인합니다.
Suspense와 Error Boundary의 활용
1. Suspense
•
비동기 컴포넌트를 렌더링할 때 로딩 상태를 관리합니다.
•
React.lazy를 사용하여 동적으로 import한 컴포넌트를 Suspense로 감싸면, 해당 컴포넌트가 로드되는 동안 로딩 스피너 같은 대체 UI를 보여줄 수 있습니다.
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>로딩 중...</div>}>
<LazyComponent />
</React.Suspense>
);
}
JavaScript
복사
2. Error Boundary
•
컴포넌트 트리에서 발생하는 JavaScript 에러를 잡아낼 수 있는 컴포넌트입니다.
•
componentDidCatch 메소드를 사용하여 에러를 로그하거나 에러 UI를 렌더링할 수 있습니다.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.log(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>문제가 발생했습니다. 다시 시도해 주세요.</h1>;
}
return this.props.children;
}
}
JavaScript
복사
사용자 경험 개선 전략
•
로딩 상태 표시: Suspense의 fallback 속성을 활용하여 로딩 중임을 사용자에게 명확히 알려줍니다. 이는 사용자에게 기다림에 대한 정보를 주어 불안감을 줄입니다.
•
에러 처리: Error Boundary를 사용하여 에러가 발생했을 때, 사용자에게 친절한 메시지를 제공하고, 가능한 경우 재시도 버튼을 추가하여 사용자가 행동을 취할 수 있도록 합니다.
•
분리된 책임: 로딩 상태와 에러 상태를 별도로 관리함으로써, 각 상태에 대해 적절한 UI를 제공하고, 코드의 가독성과 유지보수성을 높입니다.
대체 가능한 방법
Suspense와 Error Boundary를 사용하지 않고도 비슷한 기능을 구현할 수 있습니다.
로딩 상태 관리:로딩 상태를 상태 관리 라이브러리(예: Redux) 또는 컴포넌트 상태를 사용하여 관리할 수 있습니다.
1. 로딩 상태 관리
•
로딩 상태를 상태 관리 라이브러리(예: Redux) 또는 컴포넌트 상태를 사용하여 관리할 수 있습니다.
function App() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetchData()
.then(data => {
// 데이터 처리
setLoading(false);
})
.catch(err => {
setError(err);
setLoading(false);
});
}, []);
if (loading) return <div>로딩 중...</div>;
if (error) return <div>문제가 발생했습니다: {error.message}</div>;
return <div>데이터가 성공적으로 로드되었습니다!</div>;
}
JavaScript
복사
2. 에러 핸들링:
•
try-catch 문을 사용하여 비동기 함수 내에서 에러를 잡아내고, 상태를 업데이트하여 에러 메시지를 보여줄 수 있습니다.
이렇게 Suspense와 Error Boundary 없이도 비슷한 기능을 구현할 수 있지만, React의 기능을 활용하면 더 간편하고 효과적으로 관리할 수 있습니다.