Redux에서 연속적인 Action의 발생을 지양해야하는 이유?

이동준·2023년 8월 27일
0

리덕스

목록 보기
2/5
post-custom-banner

리덕스의 스타일 가이드를 보면 "연속적으로 많은 액션들의 디스패치하는 것을 피하자" 라고 명시되어 있다. 거대하고 개념적인 트랜잭션 형태의 업데이트를 수행하기 위해서 줄줄이 액션을 디스패치하는 것을 피하자고 한다. 이유가 뭘까?

UI 업데이트 비용

디스패치 되는 액션이 스토어를 구독(Subscribe)하고 있는 모든 콜백함수를 실행시킬 수 있고, UI 업데이트를 발생 시키기 때문에 비용이 발생한다.

퍼포먼스 감소

리액트의 이벤트 핸들러들로부터 큐잉된 UI 업데이트는 보통 단일 리액트 렌더링으로 일괄처리되지만, 외부에서 큐잉된 업데이트는 그렇지 않다. 이런 경우는 대부분 async 함수들, 타임아웃 콜백 함수들, 리액트가 아닌 코드를 포함한다. 이런 상황에서 각 디스패치가 끝나기 전에 동기적인 리액트 렌더링을 발생시키는데, 이는 퍼포먼스 감소로 이어진다.

불완전한 상태

거대한 트랜잭션 스타일 업데이트의 개념적인 부분인 다수의 디스패치들은 유효하다고 생각되지 않는 중간 상태들을 초래할 수 있다. 예를 들어 "UPDATE_A" , "UPDATE_B" , "UPDATE_C" 가 줄줄이 디스패치 되면 어떤 코드는 a, b, c가 동시에 업데이트 되길 기대하지만 처음 2개의 디스패치 이후의 상태는 1개 또는 2개만 업데이트가 되었기 때문에 불완전하다.

연속적인 처리 방식?

batch() 사용

연속적인 디스패치가 정말로 필요한 경우라면, 어떤 방식으로든 업데이트를 일괄 처리하는 것을 고려해야한다.
경우에 따라 다르지만, 리액트의 렌더링을 일괄처리하거나(React의 unstable_batchedUpdates()) 스토어에게 알리는 콜백함수를 늦추거나, 여러개의 액션을 하나로 묶은 거대한 디스패치로 사용해서 한번의 알림만 줄 수 있다.

post-custom-banner

0개의 댓글