🖋️ 컴포넌트에 API 데이터 최적 사용

컴포넌트 설계를 최적화

---

• 하위 컴포넌트로 데이터를 효율적으로 전달하는 것

• 고성능 및 유지 관리가 가능한 애플리케이션을 만드는 데 중요

• 데이터 패칭 전략

  • React-Query 사용

    서버 상태 관리를 위해 React Query와 같은 라이브러리는 
    일반적으로 이러한 작업과 관련된 상용구 코드 없이 
    데이터 가져오기, 캐싱 및 동기화를 최적화

  • 데이터 패칭을 위한 Suspense

    동시 모드로 React의 Suspense 기능을 활용하여 
    데이터를 비동기적으로 가져오고 데이터가 로드되기를 
    기다리는 동안 폴백 콘텐츠(예: 로딩 스피너)를 표시

• 부품 설계 최적화

  • 후크가 있는 기능적 컴포넌트

    상태, 부작용 및 컨텍스트를 보다 깔끔하고 
    간결하게 관리하려면 기능적 구성 요소와 후크를 선호

  • 메모이제이션

    기능적 컴포넌트에는 React.memo를, 
    클래스 컴포넌트에는 React.PureComponent를 사용
    
    동일한 props를 가진 컴포넌트의 출력을 메모하여 
    불필요한 재렌더링을 방지

  • 코드 분할

    React.lazy 및 Suspense를 사용하여 
    코드 분할을 구현하여 구성 요소를 동적으로 가져오기 
    
    이렇게 하면 코드를 필요할 때만 로드되는 더 작은 덩어리로 
    분할하여 초기 로드 시간이 단축

• 효율적인 Prop 전달(Prop Drilling, Context API)

  • 프롭 드릴링 방지

    여러 수준의 구성 요소를 통해 프롭을 전달(프롭 드릴링)하면 
    코드를 유지 관리하기가 더 어려워질 수 있음 
    
    이를 방지하려면 Context API 또는 
    상태 관리 라이브러리를 사용

  • 컨텍스트 API

    React의 Context API를 활용하여 
    구성 요소 트리 전체에서 전역 데이터를 공유
    
    이는 테마, 사용자 정보 또는 모든 전역 설정에 특히 유용

  • 상태 관리 라이브러리

    복잡한 애플리케이션의 경우 Redux 또는 
    Zustand와 같은 상태 관리 라이브러리를 사용하여 
    전역 상태를 보다 효율적으로 관리하는 것을 고려

• 📢 최선으로 데이터 패칭 접근 방식

  • 데이터 응집력 (상위에서 하위로)

    구성 요소가 동일한 데이터에 의존하는 경우
    
    더 높은 수준에서 이 데이터를 관리하면 요청이 줄어들고 
    구성 요소 전체에서 데이터 일관성을 유지

  • 구성 요소 자율성 (해당 컴포넌트 자체 패칭)

    애플리케이션의 다양한 부분에서 사용되도록 되어 있는 경우
    
    해당 구성 요소 내에 데이터 가져오기/패칭을 포함하면 
    자율성과 재사용성을 높임

    
    

데이터 응집력이 있는 방법을 통해 데이터 패칭을 할 경우
페이지 컴포넌트에 데이터 패칭을 받은 후 데이터가 필요한
하위 컴포넌트에 props 로 뿌리기, 이런 경우 depth 가
많이 깊은 경우 Context 나 Recoil, Redux 등을 사용하여
prop drillings 방지

완전 자유로운 형식의 컴포넌트 경우
자체적으로 해당 컴포넌트 내에서 API Call 해서 데이터를 사용
이는 여러 프로젝트에서 사용되는 구성 요소에 특히 유용