React.lazy 를 자신 있게 사용하기: 빠르게 반복할 때 컴포넌트를 안전하게 로드하는 방법

딜레마#

요즘 소프트웨어 개발은 "빠르게 움직이며 부수기" 라는 인기 철학 아래 더 빠르게 진행되고 있습니다. 이걸로 평가하겠다는 건 아니에요. 상황이 그렇다는 것뿐입니다. 하지만 이 빠른 속도는 특히 React 에서 컴포넌트를 로드할 때 문제로 이어질 수 있습니다.

프로젝트에서 React.lazy 를 사용하여 컴포넌트를 필요에 따라 로드하는 경우, ChunkLoadError 및 Loading chunk failed 와 같은 문제를 겪었을 수 있습니다. 여기에는 몇 가지 가능한 이유가 있습니다:

• 사용자 인터넷 연결이 느리거나 불안정한 경우와 같은 네트워크 문제.
• 사용자가 오래된 앱 버전을 사용 중이며, 브라우저가 더 이상 존재하지 않는 청크를 로드하려고 시도하고 있습니다.

보통 페이지를 새로 고침하면 문제가 해결될 수 있지만, 사용자에게 좋은 경험은 아닙니다. 사용자가 다른 경로로 이동할 때 흰 화면이 나타난다면, 여러분의 앱에는 좋지 않은 사진을 남길 것입니다.

속도와 원활한 사용자 경험 사이의 균형을 맞출 수 있을까요? 물론이죠. 방법을 보여드리겠습니다 (물론 TypeScript 와 함께).

솔루션#

강제적인 솔루션으로는 서버에 모든 버전의 청크를 저장해 더 이상 "누락된 청크" 문제를 방지할 수 있습니다. 그러나 앱이 커지면서 디스크 공간 요구 사항이 증가하여 이 솔루션은 비현실적일 수 있으며, 여전히 네트워크 문제를 해결하지 못합니다.

재시도 또는 새로 고침이 문제를 해결할 수 있다는 사실을 고려할 때, 이 솔루션을 코드에 구현할 수 있습니다. 이 문제가 보통 사용자가 다른 경로로 이동할 때 발생하기 때문에 사용자가 눈치채지 못하게 문제를 해결할 수 있습니다. 우리가 할 일은 React.lazy 함수 주위에 재시도 및 새로 고침을 처리하는 래퍼를 구축하는 것입니다.

이미 이와 같은 솔루션을 구현하는 방법에 대한 훌륭한 기사가 많이 있으므로 솔루션의 아이디어와 내부 작동 방식에 중점을 두겠습니다.

래퍼 생성#

첫 번째 단계는 React.lazy 함수 주위에 래퍼를 만드는 것입니다:

재시도 처리#

네트워크 문제를 처리하기 위해 importFunction 을 tryImport 함수로 감싸서 재시도를 처리할 수 있습니다:

간단해 보이죠? 재시도를 보다 효율적으로 처리하려면 exponential backoff 알고리즘을 구현할 수도 있습니다.

새로 고침 처리#

오래된 버전 문제를 처리하려면, 오류를 잡아서 페이지를 새로 고침할 수 있습니다:

그러나 이 구현은 매우 위험합니다. 오류가 새로 고침으로 해결되지 않을 때 무한 새로 고침 루프를 유발할 수 있기 때문입니다. 그동안 앱 상태는 새로 고침 중에 손실될 것입니다. 따라서 sessionStorage 의 도움을 받아 페이지를 새로 고치려는 메시지를 저장해야 합니다:

이제 safeLazy 함수에서 오류를 잡으면, 새로 고침으로 해결할 수 없는 문제임을 알 수 있습니다.

동일한 페이지에서 여러 lazy 컴포넌트 사용하기#

현재 구현에는 아직 숨겨진 함정이 있습니다. 동일한 페이지에 여러 lazy 컴포넌트가 있는 경우, 다른 컴포넌트들이 sessionStorage 값을 재설정할 수 있기 때문에 무한 새로 고침 루프가 여전히 발생할 수 있습니다. 이 문제를 해결하기 위해 각 컴포넌트에 유니크 키를 사용할 수 있습니다:

이제 각 컴포넌트는 고유한 sessionStorage 키를 가지게 되어, 무한 새로 고침 루프를 피할 수 있습니다. 솔루션의 세세한 부분까지 계속 수정할 수 있습니다. 예를 들어:

• 모든 키를 배열로 수집하여 단일 스토리지 키만 필요하게 합니다.
• 오류 발생 전에 페이지를 한 번 이상 새로 고칠 수 있도록 새로 고침 한도를 설정합니다.

하지만 여러분은 이미 아이디어를 이해하셨을 것입니다. 테스트와 설정이 포함된 포괄적인 TypeScript 솔루션은 GitHub 레포지토리 에서 확인할 수 있습니다. 또한 react-safe-lazy 패키지를 NPM 에서 이미 배포했으니, 여러분의 프로젝트에서 바로 사용할 수 있습니다.

결론#

소프트웨어 개발은 섬세한 작업이며, 심지어 작은 세부 사항도 해결하기 위해 노력이 필요할 수 있습니다. 이 기사가 여러분이 React.lazy 의 문제를 우아하게 처리하고 앱의 사용자 경험을 개선하는 데 도움이 되기를 바랍니다.