Intro & Install

정말 오랜만에 포스팅을 작성하는 것 같네요.. 최근에 React와 Next.js를 사용한 프로젝트를 연달아 진행하면서
실전에서 적용하면서 겪은 경험과 이슈들을 서둘러 블로그에 게시하고 싶었습니다
자 그럼 기본적인 환경 설정을 위해 프로젝트 폴더를 하나 만들고 터미널을 열어 아래의 명령어를 입력해 주세요!

npm install react react-dom redux redux-saga
or
yarn add react react-dom redux redux-saga

Redux-Saga 설정은 공식 문서을 참고해 주세요!

Redux-Saga

먼저 Redux-Saga를 써야 하는 이유 정도는 알고 사용하는 것이 좋겠죠? 일반적인 Redux는 dispatch를 동기(synchronous)
방식으로 실행합니다. 즉, 기존 Redux의 경우 View에서 클라이언트의 어떠한 행위로 상태의 변화를 줄 때 Action을 리듀서를 통해
Store로 보내게 되죠? 이 과정을 디스패치(dispatch)라고 하며 상태가 변경되면
Store를 구독하고 있는 컴포넌트에서 즉시 값을 할당받을 수 있게 됩니다

그렇다면, 예시를 한번 들어보죠! 우리가 보통 로그인을 통한 사용자 인증을 하기 위해서는 비동기를 동기식으로 처리해
async await을 사용한다던지 인증을 포함한 데이터 처리를 순서대로 함수를 실행시켜야 하겠죠?
하지만 반대로 비동기식으로 처리해야 할 때도 있겠죠 Redux-Saga는 Action을 중간에서 가로채서 다른 Action으로
디스패치 하기도 하고 기존 요청을 취소하거나 요청이 실패하게 되었을 때 재요청하거나 예외처리를 할 수도 있습니다.

Generator

Redux-Saga는 자바스크립트의 제너레이터 문법을 사용합니다
일반적인 함수는 하나의 값을 반환하도록 되어있지만 제너레이터는 여러개의 값을 필요에 따라 하나씩 반환할 수 있죠?
아래의 예시를 한번 같이 보도록 하죠 제너레이터 문법에 따라 조건에 맞는 yield 구문을 실행하게 되고
특수 함수인 'takeLatest'는 가장 최근에 실행된 작업만 수행하고 나머지 작업은 취소 처리합니다

function* sagaAction(params) {
    yield put({type: "START"});
    try {
        const response = yield call(Api.sagaAction, "search", params);
        yield put({type: "SUCCEEDED", payload: response});
    } catch (error) {
        yield put({type: "FAILED", payload: error});
    } finally {
        yield put({type: "FINISHED"});
    }
}

function* takeLatestSagaAction() {
    yield takeLatest({type: "REQUEST_ACTION", sagaAction});
} 

Generator 사용방법은 이전 포스팅을 참고해 주세요!

Middleware

다음은 미들웨어가 어떤 방식으로 동작하는지도 한번 알아보죠. 일반적으로 컴포넌트에서 액션을 디스패치해서 리듀서를 통해 스토어로 전달되고 스토어에 변경된 상태값이 다시 컴포넌트로
연결되는게 리덕스의 기본 동작이였죠! 이때 미들웨어는 리듀서를 감싸 리듀서 전과 후의 특정 액션에 특화된 작업들을 추가하거나
처리할 수 있는 감시자 역할을 하게 됩니다. 아래의 함수를 통해 원리를 알아보도록 해보죠

function middleware(store) {
    return function(middlewareRun) {
        return function(action) {
            //before reducer
            const result = middlewareRun(action);
            //after reducer
            return result;
        }
    }
} 

'middlewareRun'은 리듀서가 실행되는 부분입니다! 여러가지 감시 기능을 다중으로 처리할 수 있죠

Sample

Conclusion