Suspense, ErrorBoundary 그리고 React Query

항상 코드 짤때마다 고민이 많았다.

주로 데이터를 가져올 때 try...catch를 사용하는 경우가 많았는데 이 경우에 문제(?) 점이 있다.

 

"하... 이게 맞나.." 하는 생각이 든다는 것이다.

 

 

해당 api를 선언하는 함수를 만들어주고, 그 안에 try...catch...를 때려박아주고 아닐 시의 UI 처리까지 

그걸 매번 반복해야했다. 

 

그리고 그 뿐인가 api를 호출할 때, 데이터를 지금 가져오고 있는지.. 가져오는데 실패했는지.. 

이것 또한 UI에서 보여주어야 하기 때문에 보일러 플레이트 코드가 계속 늘어났다.

 

 

 

이번에 리액트 19버전이 나왔다고 해서 봤는데 useTransition을 쓰거나, use를 쓴다던지 이런 불편함을 해소하는데에 

많이 초점이 맞춰져 있는 것 같았다. 그래서 아예 하는김에 공부하지 않았던

 

Suspense, ErrorBoundary, 그리고 React-Query를 살짝 공부해보았다.

 

원래 원하던 것은

셋을 다 쓰는 것이다.

 

예를 들어서 

<ErrorBoundary fallback={에러시 보여줄 요소}>
	<Suspense fallback={로딩 시 보여줄 요소}>
    	<실제로 돌아갈 컴포넌트/>
    </Suspense>
</ErrorBoundary>


이렇게 해서 

function 실제로 돌아갈 컴포넌트 (){
	const {data, refetch} = useQuery({
    	queryKey:['dummyData'],
        queryFN:dummyData.testApi,
        enabled:false,
        suspense:true
    });
    
    
    return(
    	......
        <클릭하면 refetch하는 버튼/>
        <data를 보여주는 코드/>        
    )

}

 

이렇게 하려고 했다. 

그러면 정말 너무 편해진다. 

에러컴포넌트...? 그냥 재사용하면 돼

로딩컴포넌트...? 그냥 재사용하면 돼

fetching 실패했을 때....? query 안에다가 재사용횟수 지정할 수 있어..

5번 넘게 실패하면 ..? 그것도 할 수 있어

5분 마다 최신 데이터 가져오고 싶어..? 그것도 할수 있어

 

 

진짜 와 편해지겠구나 싶었는데 왠걸

useQuery에서 suspense와 enabled는 같이 사용할 수 없다....

 

 

그래서 결론

 

1. 페이지 초기 렌더링 시부터 데이터를 계속 보여줄 것이라면, ErrorBoundary, Suspense , React Query 삼위일체 가능

2. 페이지 초기 렌더링 시에 데이터를 바로 보여주지 않을 것이라면, 리액트 쿼리 쓰고 ErrorBoundary, Suspense 못쓴다. 그래도 충분히 편하다.

 

 

난 리액트 19를 공부하고 있엇는데 왜 이걸 하고 있는가