React ErrorBoundary 관련 fallback UI 렌더링 이슈

[변재정]

안녕하세요 질문이 있어 찾아왔습니다.

React-query를 이용해 비동기함수를 호출 시 발생한 에러를 errorboundary에 throw하고 fallbackUI를 렌더링하는 기능을 구현하려합니다.

```
<ErrorBoundary FallbackComponent={ErrorFallback} onReset={reset}>
<ComponentA />
</ErrorBoundary>
```

ErrorBoundary 에러핸들링의 경우 위 코드처럼 react-query에서 발생한 에러를 가장 가까운 ErrorBoundary로 던지는 구조기 떄문에 react-query를 직접 참조하는 컴포넌트(<ComponentA />)를 ErrorBoundary로 감싸줘야 한다고 들었습니다.

만약 A컴포넌트에서 react-query로 받아온 data를 B컴포넌트에 props로 전달하고 B컴포넌트에서 data값을 렌더링시키는 구조일 때 비동기함수 호출 시 에러가 발생했을 때 fallback ui가 띄워지는 곳은 B컴포넌트 영역이 되도록 하는 방법은 없을까요??

비동기처리하는 버튼과 FallbackUI가 별도로 분리되어있는 기능을 구현하고싶은데 잘 안돼서 질문드립니다ㅠㅠㅠ

위 사진처럼 api를 호출하는 버튼과 렌더링되는 ui(위 사진 기준으론 fallbackUI)가 분리되도록 설계하고 싶은데 어떻게 하면 좋을까요??


강의 정말 잘 듣고있습니다 항상 감사합니다!

[codingapple]

리액트쿼리쓰면 props 쓰고 그럴 필요가 없을 수도 있습니다 B컴포넌트에서 직접 ajax요청해도될듯요

[변재정]

아 <ComponentA />내 상품을 불러오는 api호출 버튼이 존재하는데 
<ComponentA /> 에서 상품을 조회하기 위한 조건(상품 가격, 개수, 상품 종류 등등)들을 모두 수집한 후 버튼을 클릭해 조건에 맞춰 상품을 조회해옵니다. 
조건 변경 후 다시 api재요청을 할 수 있어야하기 때문에 refetch() 메서드를 사용했습니다. 
즉 상품을 불러오는 버튼이 <ComponentB/> 내부에 있다면 에러발생시 fallbackUI가 렌더링되면서 버튼이 사라지게 되므로 재요청이 불가능해집니다.
때문에 버튼을 <ComponentA /> 내부에 넣어주고 받아온 data값을 <ComponentB/>로 props를 통해 전달해주도록 설계했습니다. 
그래서 react-query를 통해 ajax요청을 하는 컴포넌트와 실제 데이터를 렌더링하는 컴포넌트를 분리한 상태에서 에러가 발생하면  
실제 데이터를 렌더링하는 컴포넌트(ComponentB) 대신 fallbackUI를 화면에 띄우도록 하는 방법이 궁금합니다!!
아니면 혹시 제가 만든 비즈니스로직보다 더 좋은 구현방법이 있다면 알려주시면 감사하겠습니다!!

추가로 궁금한게 '리액트쿼리쓰면 props 쓰고 그럴 필요가 없을 수도 있습니다'라고 말씀하신 이유가 뭔지 알 수 있을까요??
리액트쿼리를 자세하게 알지 못해서 그런지 어떤 의미인지 이해가 가질 않습니다ㅠㅠ

혹시 답변주실 때 더 필요한 정보가 있으시다면 다시 답변달도록 하겠습니다. 아무쪼록 항상 감사합니다!!

[codingapple]

그럼 B에서 props에 뭔가 들어있으면 보여주고 없으면 에러UI 보여달라고 if문 쓰면 쉽지않을까요

[변재정]

아 제가 설명하지 않은 부분이 있는데 QueryErrorResetBoundary 도 같이 활용할 생각이었습니다.
QueryErrorResetBoundary의 reset함수를 이용해서 쿼리 오류 상태 초기화 후, 쿼리재요청 기능을 구현하고 싶었거든요.
그래서 ErrorBoundary에 광적으로 집착했습니다,,,ㅎㅎㅎ

정확한 컴포넌트 구조는

```
<QueryErrorResetBoundary>
                {({ reset }) => (
                    <ErrorBoundary
                        onReset={reset}
                       FallbackComponent={ErrorFallback}
                    >
                       <ComponentB />
                    </ErrorBoundary>
                )}
            </QueryErrorResetBoundary>
```

이런 구조라고 생각하시면 될 것 같습니다.

[codingapple]

아마 그걸로는 A에서 에러난걸 하위컴포넌트 B에서 에러난 것 처럼 만들수는 없을듯요
리셋버튼도 직접 만들면 될듯합니다

[변재정]

그쵸... 역시 안되는군요ㅠㅠㅠ 답변 정말 감사합니다!!

[글쓴이]

글