react Suspense ErrorBoundary ??

react로 개발하시는 분들이라면 Suspense ErrorBoundary 용어에 친숙하실텐데요.

개발하면서 몇가지 궁금증이 생겨 질문드립니다.

1. 데이터 패칭을 부모에서 진행하고 자식요소에서 로딩처리를 하고싶을때는 suspense 사용개념상 선언적으로 처리 못하는데 이런경우는 보통 어떻게 처리하시나요?

2. mutation 에러가 났을때, 대부분의 ui에서는 노티하는 토스트알랏을 사용하는데요.
보통은 한곳에서 토스트 알랏으로 에러처리를 하는데
특수사용처에서 만 공통에러 처리가 아닌 커스텀 한 에러 알랏으로 ui를 제공하고 싶을땐 어떻게 처리할까여?

3. Suspense ErrorBoundary를 사용하게 되면 데이터의 흐름이 직관적으로 보이지 않는 경우가 생기는데요.
예를 들어 부모에서 바운더리 공통컴포넌트가 중첩 될 경우 (글로벌 바운더리, 사용처 바운더리 혼용)
어떠한 자식 컴포넌트에서 패칭을 하는지 확인하려면 컴포넌트 내부를 살펴봐야 됩니다.
이런 경우 어떠한 규칙을 세우고 개발 하는지 궁금합니다.

안녕하세요, 인프런 AI 인턴입니다.

프론트엔드지배자님께서 React의 Suspense와 ErrorBoundary에 관해 질문해 주셨네요. 각각의 질문에 대해 아래와 같이 답변드리겠습니다.

데이터 패칭을 부모에서 진행하고 자식요소에서 로딩처리를 하고 싶을 때:
- 부모 컴포넌트에서 데이터를 패칭한 후, 자식 컴포넌트에 데이터를 전달하는 패턴을 많이 사용합니다. 자식 컴포넌트에서는 이 데이터를 기반으로 상태를 관리하며 로딩 상태를 처리할 수 있습니다. 혹은 context API를 사용해 부모에서 언급한 데이터를 자식에게 전파할 수도 있습니다. Suspense를 활용해 자식 컴포넌트 자체에서 데이터 로딩이 가능하지만, 부모에서 로딩 처리를 하길 원할 시에는 살짝 레거시한 방법이 필요할 수 있습니다.
특수 사용처에서 커스텀 에러 알람 제공:
- 커스텀 에러 알람을 제공하기 위해, ErrorBoundary 컴포넌트 내에서 오류를 감지한 후 props로 특정 에러 유형에 따라 커스텀 UI를 Render할 수 있도록 구성할 수 있습니다. 또한 특정 컴포넌트에서만 동작할 커스텀 훅을 사용하여 요구되는 경우 커스텀 에러 알람을 띄울 수 있게 구현할 수 있습니다.
Suspense와 ErrorBoundary 사용 시 데이터 흐름 직관성:
- 데이터 흐름이 직관적으로 보이지 않는다는 문제를 해결하기 위해서는 컴포넌트 구조를 명확히 하고, 어디서 패칭이 이뤄지는지 명시적으로 규칙화하는 것이 중요합니다. 공통되는 패칭 로직을 하나의 컴포넌트 혹은 훅으로 분리하고, 패칭이 이뤄질 때 로깅을 추가하여 디버깅을 용이하게 할 수 있습니다.

구체적인 예제나 적용 사례는 개발 환경에 따라 다를 수 있으니, 이러한 방향으로 접근해 보시면 도움이 될 것입니다. 추가적인 참고가 필요하신 경우, stackoverflow.com에서도 다양한 의견을 받아보실 수 있습니다.

감사합니다.

인프런 커뮤니티 질문&답변