리덕스

redux는 리액트 상태 관리 라이브러리 중 하나다. 리덕스를 사용해 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있게된다.

또, 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다.

리덕스를 사용해 전역적으로 상태를 관리할 수 있는데, 전역 상태 관리만 한다면 context api를 사용해도 충분하다. 하지만 프로젝트의 규모가 클 경우 리덕스를 사용하면 코드의 유지 보수성도 높아지고 작업 효율도 극대화된다.

Redux Saga

redux-thunk는 함수 형태의 액션을 디스패치해 미들웨어에서 해당 함수에 스토어의 dispatch와 getState를 파라미터로 넣어서 사용하는 원리다.

redux-saga는 redux-thunk 다음으로 많이 사용하는 비동기 작업 관련 미들웨어다. 대부분의 경우에는 redux-thunk로도 충분히 기능을 구현할 수 있는데, redux-saga를 사용하면 조금 더 까다로운 상황에서 유용하다.

• 기존 요청을 취소 처리해야 할 때(불필요한 중복 요청 방지)
• 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행할 때
• 웹소켓을 사용할 때
• API 요청 실패 시 재요청해야 할 때

참고로 redux-saga는 제너레이터 함수 문법을 사용하는데 다음 글을 보자.

제너레이터 함수

• 제너레이터 함수를 만들 때는 function* 키워드를 사용한다.
• **next()**를 이용해 다음 yield를 호출한다.

제너레이터가 처음 만들어지면 함수의 흐름은 멈춰 있는 상태다. next()를 호출랗면 다음 yied가 있는 곳까지 호출하고 다시 함수가 멈추게 된다.

제너레이터 함수를 사용해 함수를 도중에 멈출 수도 있고, 순차적으로 여러 값을 반환시킬 수도 있다. next 함수에 파라미터를 넣으면 제너레이터 함수에서 yield를 사용해 해당 값을 조회할 수도 있다.

function* sumGenerator() {
	console.log('sumGenerator가 만들어졌습니다.');
	let a = yield;
	let b = yield;
	yield a + b;
}

const sum = sumGenerator();
sum.next();
// sumGenerator가 만들어졌습니다.
// {value: undefined, done: false}
sum.next(1);
// {value: undefined, done: false}
sum.next(2)
// {value: 3, done: false}
sum.next()
// {value: undefined, done: true}

redux-saga는 제너레이터 함수 문법을 기반으로 비동기 작업을 관리해준다. 간단히 말해서 디스패치하는 액션을 모니터링해서 그에 따라 필요한 작업을 따로 수행할 수 있는 미들웨어다.