반응형
데이터 fetch와 state 관리는 페이지 단에서 하는 것이 좋다.
1. 최소한의 네트워크 호출
데이터를 한 번만 fetch하고, 그 데이터를 여러 컴포넌트에 전달할 수 있기 때문에 불필요한 네트워크 요청을 줄일 수 있다. 만약 각 컴포넌트에서 데이터를 개별적으로 fetch한다면, 불필요한 중복 호출이 발생할 수 있다.
2. 상태 관리의 중앙 집중화
페이지 단에서 fetch와 state 관리를 하면 여러 하위 컴포넌트에 데이터를 쉽게 전달할 수 있다. 이렇게 하면 상태 관리가 중앙 집중화되어 예측 가능하고 유지보수가 쉬워진다.
3. UI 성능 최적화
페이지 전체에서 데이터를 필요로 하는 경우, 한 번의 데이터 fetch로 모든 컴포넌트에 필요한 데이터를 공급할 수 있다. 이를 통해 로딩 상태를 일관되게 관리하고, 중복 fetch를 방지하여 UI 성능을 향상시킬 수 있다.
4. 데이터 전달 및 리렌더링 최소화
페이지 단에서 데이터를 fetch하면 해당 데이터를 props로 전달하여 필요한 컴포넌트만 리렌더링할 수 있다. 컴포넌트 내부에서 fetch를 하면 컴포넌트 단위로 불필요한 리렌더링이 발생할 수 있다.
언제 컴포넌트 단에서 fetch를 하는 것이 좋을까?
- 컴포넌트가 독립적이고, 특정 데이터를 자체적으로 관리해야 하는 경우 (예: 페이지 일부에서만 필요한 데이터를 비동기로 가져와야 하는 경우).
- 특정 컴포넌트가 동적 데이터나 실시간 데이터를 계속해서 가져와야 하는 경우.
일반적으로는 페이지 단에서 fetch하고, 컴포넌트 단에는 상태를 props로 전달하는 방식이 더 효율적이다.
반응형
