React Thunk 및 React Saga는 특히 API 호출과 같은 비동기 작업을 관리하기 위해 React 애플리케이션의 부작용을 처리하기 위한 미들웨어 라이브러리입니다. 둘 다 일반적으로 Redux와 함께 사용되지만 약간 다른 목적과 접근 방식을 제공합니다.

반응 썽크

1. 개요:

React Thunk는 액션 객체 대신 함수를 반환하는 액션 생성자를 작성할 수 있는 미들웨어입니다. 이는 API 요청이나 복잡한 동기 논리(예: 조건부 작업 디스패치)와 같은 비동기 작업을 처리하는 데 유용합니다. 반환된 함수는 디스패치 및 getState를 인수로 수신하여 다른 작업을 디스패치하거나 함수 내의 현재 상태에 액세스할 수 있도록 합니다.

2. 주요 개념:

• 미들웨어: 썽크는 기능(즉, 썽크)을 처리하는 저장소의 능력을 확장하는 미들웨어입니다.
• 비동기 작업: Thunk를 사용하면 작업 전달을 지연하거나 특정 상태 또는 논리에 따라 조건부로 전달할 수 있습니다.
• 간단함: Thunk는 비교적 간단하므로 대부분의 사용 사례에 쉽게 사용할 수 있습니다.

3. 작동 방식:

• 일반적으로 액션 생성자는 일반 JavaScript 개체(액션)를 반환합니다.
• Thunk를 사용하면 작업 생성자가 디스패치 및 getState를 수신하는 함수("썽크")를 반환할 수 있습니다. 이 함수 내에서 비동기 논리(예: API에서 데이터 가져오기)를 수행한 다음 실제 작업을 전달할 수 있습니다.

4. 예:

다음은 React 앱에서 redux-thunk를 사용하는 방법에 대한 기본 예입니다.

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

5. 썽크의 장점:

• 단순성: 썽크는 이해하고 구현하기 쉽습니다.
• 작은 설치 공간: 가볍고 복잡한 구성이 필요하지 않습니다.
• 디스패치에 대한 직접적인 제어: 작업이 디스패치되는 시기와 방법을 더 효과적으로 제어할 수 있습니다.

6. 단점:

• 확장하기 어려움: 복잡한 비동기 흐름의 경우 Thunk는 중첩된 논리와 많은 디스패치 호출로 인해 지저분해질 수 있습니다.
• 간소한 구조: Thunk는 부작용 관리를 위한 특정 구조를 적용하지 않으므로 제대로 처리하지 않으면 일관되지 않은 코드가 발생할 수 있습니다.

리액트 사가

1. 개요:

React Saga는 제너레이터 함수를 사용하여 Side Effect를 보다 체계적으로 처리할 수 있는 미들웨어입니다. Thunk와 같은 함수를 반환하는 대신 "효과" 시스템을 사용하여 비동기 작업을 관리하고 논리 흐름을 제어합니다. Sagas는 전달된 작업을 수신하고 API 호출, 데이터 가져오기 및 기타 작업과 같은 부작용을 수행할 수 있는 장기 실행 백그라운드 프로세스입니다.

2. 주요 개념:

• 생성기 함수: Sagas는 동기식으로 보이는 비동기 코드를 작성할 수 있는 ES6 생성기 함수(함수*)를 사용하여 구현됩니다.
• 감시자와 작업자: Sagas는 종종 "감시자" 사가(디스패치된 작업을 수신하는)와 "작업자" 사가(부작용을 처리함)로 구분됩니다.
• 테이크, 풋, 콜: Redux-Saga는 부작용을 트리거하고 작업을 전달하고 API를 호출할 시기를 제어할 수 있는 효과 생성기(테이크, 풋, 호출 등)를 제공합니다.

3. 작동 방식:

• Redux-Saga를 사용하면 부작용 처리를 담당하는 sagas(장기 실행 백그라운드 작업)를 정의할 수 있습니다.
• Sagas는 일반적으로 생성기 함수 및 call(함수 호출) 및 put(작업 전달)과 같은 산출 효과로 작성됩니다.
• Saga는 또한 take를 사용하여 특정 작업을 기다리거나 takeEvery 또는 takeLatest를 사용하여 모든 작업을 수신할 수 있습니다.

4. 예:

redux-saga를 사용하는 방법에 대한 기본 예는 다음과 같습니다.

   import { call, put, takeLatest } from 'redux-saga/effects';

   // Worker saga: will be fired on FETCH_USER_REQUEST actions
   function* fetchUser(action) {
     try {
       const response = yield call(fetch, '/api/user');
       const data = yield response.json();
       yield put({ type: 'FETCH_USER_SUCCESS', payload: data });
     } catch (e) {
       yield put({ type: 'FETCH_USER_FAILURE', message: e.message });
     }
   }

   // Watcher saga: spawns a new fetchUser task on each FETCH_USER_REQUEST
   function* mySaga() {
     yield takeLatest('FETCH_USER_REQUEST', fetchUser);
   }

   export default mySaga;

5. Redux-Saga의 장점:

• 복잡한 부작용에 더 좋음: Saga의 효과 기반 접근 방식은 확장성이 뛰어나고 복잡한 비동기 흐름 관리(예: 재시도, 디바운싱 또는 계단식 API 호출 처리)에 적합합니다.
• 테스트 가능: Sagas는 생성기 기능을 중심으로 구축되었으므로 테스트하기 쉽습니다.
• 선언적: 효과를 사용하면 어떤 부작용이 발생할지 더 명확해지며 흐름을 더 예측 가능하게 만듭니다.
• 취소 및 순서: Saga를 사용하면 진행 중인 작업을 쉽게 취소하거나 이벤트의 순서 흐름을 적용할 수 있습니다(예: 여러 작업을 기다리는 것).

6. 단점:

• 가파르게 학습 곡선: 생성기 기능과 전반적인 사가 패턴을 사용하는 것은 초보자가 이해하기 어려울 수 있습니다.
• 오버헤드: 소규모 애플리케이션의 경우 Thunk와 같은 간단한 솔루션에 비해 과잉처럼 느껴질 수 있습니다.
• 상세: Sagas는 Thunk에 비해 더 많은 상용구 코드를 포함하는 경향이 있습니다.

비교: React Thunk와 React Saga

언제 무엇을 사용합니까?

• React Thunk 사용 다음과 같은 경우:

  • 귀하의 애플리케이션에는 기본 API 요청 및 조건에 따른 전달과 같은 상대적으로 간단한 비동기 요구 사항이 있습니다.
  • 많은 상용구 없이 가볍고 이해하기 쉬운 솔루션을 원합니다.

• React Saga 사용 다음과 같은 경우:

  • 재시도, 작업 순서 지정, 경합 조건 또는 서로 의존하는 여러 작업과 같은 보다 복잡한 비동기 흐름을 관리해야 합니다.
  • 선언적 접근 방식을 선호하고 부작용에 대한 더 나은 제어를 원합니다.
  • 앱에는 장기적으로 더 나은 테스트 가능성과 코드 유지 관리 기능이 필요합니다.