How to fetch data in React 정리

목표

• React 데이터 패칭 방법론

---

1. Data Fetch & Loading

1) 데이터 패칭 적용

• 데이터를 사용하는 컴포넌트들에 공통 상위 컴포넌트

2) 로딩 스피너, 프로그래스바 적용 && 에러 바운드리

2-1) Fetching 컴포넌트와 Loading이 일치하는 경우

• 1) 기준을 따르는 경우
• Fetching과 함께 해당 컴포넌트에서 Loading도 처리

2-2) Fetching 컴포넌트 보다 상위 컴포넌트에서 Loading이 필요한 경우

• Fetching, Loading 작업을 모두 상위로 올린다.

• 1) 기준보다 상위 컴포넌트에서 Loading이 필요한 경우, Fetching도 상위로 이동
• Fecthing 컴포넌트 이외에 컴포넌트에서 Loading이 필요한 경우
• 에러 : 2번과 동일

2-3) Fetching 컴포넌트 하위 컴포넌트에서만 Loading 필요한 경우

• Fetching은 1) 조건을 유지한다.
• Loading 요소만 자식 개별로 처리하고, Depth를 유지한다

---

출처

How to fetch data in React