에러로 인해 메시지 대신 빈 화면이 나오는 이유는 무엇인가요?
React를 사용하면서 JavaScript 에러가 발생하면 화면이 오류 메시지 대신 완전히 비어 있는 상태로 표시되는 것을 알 수 있습니다. 이 동작은 혼란스럽고 좌절스러울 수 있지만 그에는 이유가 있습니다.
React에서 렌더링 과정 중에 에러가 발생하면 프레임워크가 일반적인 방법으로 이를 복구할 수 없습니다. 애플리케이션의 상태가 손상되어 렌더링할 수 있는 올바른 상태로 되돌릴 수 있는 메커니즘이 없는 것입니다. 마지막 수단으로 React는 모든 것을 아얘 언마운트하고 빈 화면을 보여줍니다.
React 16 이전에는 에러가 발생해도 가장 최근에 렌더링된 UI가 그대로 남아 있었습니다. 그러나 React 팀은 손상된 UI를 보이는 것보다 아예 UI를 표시하지 않는 것이 더 좋다고 결정했습니다. 이 결정은 손상된 UI를 유지하는 것에서 발생할 수 있는 의도치 않은 결과를 방지하기 위해 내려진 것입니다.
React는 “에러 바운더리”라는 개념을 사용하여 컴포넌트 트리에서 특정 부분의 에러를 처리하는 방법을 제공합니다. 에러 바운더리를 구현함으로써, 컴포넌트 트리의 관련 없는 부분에서 에러가 발생해도 전체 앱이 사용 불가능해지는 것을 방지할 수 있습니다.
에러 바운더리가 처리할 수 있는 것은 렌더링 중에 발생하는 에러, 라이프사이클 메서드에서의 에러, 그리고 그 하위 컴포넌트의 생성자에서의 에러입니다. 그러나 setTimeout이나 requestAnimationFrame과 같은 함수에서 발생하는 에러는 에러 바운더리에서 처리할 수 없습니다.
결론적으로, React에서 에러가 발생할 때 빈 화면이 표시되는 것은 React 팀의 의도적인 선택입니다. 처음에는 직관적이지 않아 보일 수 있지만, 이는 앱의 UI의 무결성을 보장하고 잠재적으로 해로운 결과를 방지하기 위한 것입니다.
React에서 에러 바운더리를 구현하는 방법에 대해 자세한 예제와 지침을 확인하려면 React 문서를 참조해 주세요.
