[프로젝트] 명령적 vs 선언적 프로그래밍

react-query의 장점을 찾아보던 중 "선언적으로 비동기 과정을 관리한다" 라는 말을 봄

선언적으로 관리한다는 게 뭘까?

개념

선언적 프로그래밍은 "무엇"을 원하는지를 표현하는 것에 집중함
"어떻게"를 구현하는 것보다는 목표를 달성하는 데 집중

이와 달리 명령적 프로그래밍은 "어떻게"를 구현하는 데 집중

명령적 프로그래밍

function fetchData() {
  showLoadingSpinner();
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      hideLoadingSpinner();
      displayData(data);
    })
    .catch(error => {
      hideLoadingSpinner();
      displayError(error);
    });
}

-> 비동기 흐름 이해하기 어렵고, 에러 처리 까다로움

그러나 선언적 프로그래밍에서는 비동기 과정을 선언적으로 관리

선언적 프로그래밍

import { useQuery } from '@react-query/react-query';

function MyComponent() {
  const { data, isLoading, error } = useQuery('data', () =>
    fetch('https://api.example.com/data').then(response => response.json())
  );

  if (isLoading) {
    return <LoadingSpinner />;
  }

  if (error) {
    return <ErrorMessage error={error} />;
  }

  return <DisplayData data={data} />;
}

useQuery 훅을 사용하여 데이터를 요청하고, isLoading과 error 상태를 자동으로 처리

로딩 상태, 오류 처리 직접 구현 필요 x
가독성 good, 코드 간결
데이터 요청과 상태 관리에 더욱 집중 가능

🫠