react

[Redux, Redux-Thunk, Redux-Saga] 주요 개념 정리

coinf 2023. 12. 6. 18:32

Redux

1. 스토어 (Store): Redux에서는 애플리케이션의 상태를 담고 있는 단일 객체인 스토어를 사용한. 스토어는 애플리케이션의 전역 상태를 관리하며, 모든 상태 변경은 스토어를 통해 이루어진다.

2. 액션 (Action): 상태 변경을 위한 명령어를 나타내는 객체입니다. 액션은 반드시 type 속성을 가지고 있어야 한다.

3. 리듀서 (Reducer): 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. 애플리케이션의 전역 상태가 어떻게 변경되는지를 정의 한다.

4. 디스패치 (Dispatch): 액션을 리듀서로 보내 상태를 변경하는 것을 의미합니다. store.dispatch(action) 형태로 사용된다.

5. 컨테이너 컴포넌트 (Container Components): Redux와 연결되어 상태를 관리하는 리액트 컴포넌트이다.

 

리덕스 동작 원리

  • 리덕스의 스토어는 Context로 구성되어 Provider 컴포넌트의 value props로 전달된다.
  • 해당 Context는 구체적으로 { store, subscription }과 같은 형태를 띠고 있다.
  • connect() 함수에 의해 만들어진 컴포넌트나 useSelector() 함수를 사용한 컴포넌트는 액션이 디스패치 된 후 (어떠한 구독 메커니즘에 의해) 강제적으로 리렌더링이 유발된다. 이때 해당 컴포넌트는 Provider 컴포넌트가 제공해주는 리덕스 스토어의 상태를 읽는다.
  • 참고로 스토어는 늘 참조값이 같은 가변 객체에 해당하며, Provider 컴포넌트는 중간에 스토어가 다른 걸로 바뀌지 않는 이상 늘 같은 참조값을 가지는 객체를 Context로 구성하도록 구현된다. 따라서 액션을 디스패치 하든 무엇을 하든, Provider 컴포넌트에 의해 자식 컴포넌트들이 전부 리렌더링 될 일은 없다. 즉, 리렌더링은 오로지 구독 메커니즘에 의존하여 발생할 뿐이다.


Redux-Thunk

1. Thunk: Redux-Thunk은 비동기 작업을 처리하기 위해 사용되는 미들웨어 중 하나입니다. Thunk는 함수 형태로 감싸진 액션을 다룰 수 있게 해준다.

2. 비동기 작업 처리: Thunk를 이용하면 액션 생성자에서 비동기 작업을 수행하고, 작업이 완료된 후에 액션을 디스패치할 수 있다.

3. 단점: 복잡한 애플리케이션에서 비동기 코드가 늘어날수록 코드의 복잡성이 증가할 수 있다.

 

 

 


Redux-Saga 사가 (= 제네레이터 함수)

1. Generator 함수: Redux-Saga는 Generator 함수를 이용하여 복잡한 비동기 흐름을 제어하는 미들웨어이다.

2. Side Effects 처리: Redux-Saga를 사용하면 애플리케이션의 사이드 이펙트(네트워크 요청, 로깅 등)를 쉽게 다룰 수 있다.

3. 비동기 제어: 액션을 모니터링하고, 특정 액션이 발생할 때 비동기 작업을 시작하거나 중단할 수 있다.

4. 장점: 코드의 가독성이 뛰어나며, 비동기 작업을 더 선언적이고 효과적으로 관리할 수 있다.

이렇게 Redux, Redux-Thunk, 그리고 Redux-Saga는 각각의 특징을 가지고 있으며, 상황에 따라 선택하여 사용하면 된다. Redux는 상태 관리의 기본이 되는 라이브러리이며, Thunk와 Saga는 비동기 작업을 다루는데에 있어 각각의 장단이 있다.


이펙트

  • 사가를 실행하는 실행부에게 어떠한 동작을 수행해야 할지 알려주는 일반 객체(Plain Object)이다.
  • 일반적으로 put(), call(), select() 등의 헬퍼 함수를 호출함으로써 해당 이펙트 객체를 생성한다.
  • 이펙트 자체는 단순 객체이므로 아무런 사이드 이펙트를 발생시키지 않는다. 따라서 테스트가 용이하다.

 

주요 이펙트

  • call(fn, ...args) : (비동기 혹은 동기) 함수 fn을 호출한다.
  • select(selector) : selector를 이용하여 리덕스 스토어의 상태를 읽어온다. (= store.getState() 함수)
  • put(action) : action을 디스패치 한다. (= store.dispatch() 함수)
  • take(actionType) : actionType의 액션이 디스패치 될 때까지 기다린다.
  • fork(saga, ...args) : 새로운 실행 맥락으로 saga를 실행한다.
  • takeEvery(actionType, saga, ...args) : 사가를 하나 fork 하는 헬퍼 함수이다. 해당 사가는 actionType의 액션을 기다렸다가 saga를 fork 하는 작업을 무한히 반복한다.