[React] What are good alternatives to data fetching in Effects?

useEffect 훅을 통해 데이터를 가져오는 fetch 호출은 특히 완전한 클라이언트 사이드 앱에서 인기있는 방법이다.
하지만 이것은 매우 수동적인 접근법이고 상당한 단점들을 안고 있다.

단점

1. (중요) 서버에서 랜더링되는 HTML에서는 데이터 값 없이 로딩된 상태만 가지고 있다. 클라이언트 측은 a) 모든 자바스크립트를 다운로드 해야되고, 그 다음 b) 데이터 로딩을 시작할 수 있다. 이것은 효율적이지 못 하다.
2. 부모 컴포넌트를 랜더링하고, 데이터를 가져오고, 또 자식 컴포넌트들을 랜더링하고, 데이터를 가져오는 것은 네트워크 속도에 따라, 모든 데이터를 병렬로 가져오는 것에 비해 엄청 느릴 수 있다.
3. a) 미리 데이터를 가져오거나, b) 캐싱을 할 수가 없다. 언마운트 하거나, 새로운 마운팅이 일어날 때마다 데이터를 새롭게 가져와야 한다.

위 단점들은 리액트에 국한된 문제들은 아니다. 어떤 라이브러리를 써도 마운트 과정 중 데이터를 가져올 때 적용되는 문제들이다. 아래의 접근법들을 추천한다.

다른 접근법

1. 프레임워크를 사용한다면, 빌트인된 data fetching 매커니즘을 사용하라.
2. 클라이언트 사이드 캐시를 사용하는 것을 고려해라.
   예를 들어서 react query, useSWR, react router 등이 있다.

참고자료

• What are good alternatives to data fetching in Effects? (링크)