처음 만난 리덕스 (Redux) 문서
11.2 Thunk를 사용하는 이유
그렇다면 Redux에서 Thunk를 왜 사용해야 할까요?
Thunk를 사용하는 가장 대표적인 이유는 바로 Redux에서 Async Logic과 Side Effects를 사용하기 위함입니다.
이전 강의에서 Async Logic과 Side Effects에 대해서 배웠는데요, Async Logic은 각자의 순서대로 비동기적으로 처리되는 작업을 의미하고, Side Effects는 Reducer 외부에서 보여질 수 있는 상태의 변경 또는 동작을 의미합니다.
이름 그대로 Reducer의 side에서 일어나는 일들을 의미하는 것이죠.
예를 들면, 콘솔에 로그를 출력하거나 파일을 저장하는 등의 동작입니다.
그리고 서버로부터 데이터를 받아오는 등의 비동기 작업도 큰 의미에서는 Side Effects에 속하게 됩니다.
결론적으로 Redux에서는 이러한 비동기 로직을 포함한 Side Effects를 허용하지 않기 때문에, Redux에서 Side Effects를 사용하고 싶을 때 Thunk를 사용하는 것입니다.
그렇다면 한 가지 근원적인 궁금증이 하나 생깁니다.
"Redux에서 허용하지 않는 비동기 로직과 Side Effects를 꼭 이렇게까지 해서 Redux에서 써야 하는가?" 라는 의문이 들 수 있죠.
function MyComponent(props) {
useEffect(() => {
// 비동기 로직 또는 Side Effects 수행
}, []);
return (
<div>
...
</div>
)
}
export default MyComponent;
이 코드처럼 애초에 Thunk 같은 것을 사용하지 않고 Redux가 아닌 리액트 컴포넌트 내에서 useEffect 훅을 사용해서 비동기 로직이나 Side Effects를 수행할 수도 있습니다.
하지만 이렇게 굳이 Thunk까지 사용해서 Redux에서 비동기 로직과 Side Effects를 수행하도록 하는 이유는, UI와 이런 비즈니스 로직을 분리하는 것이 구조적으로 좋기 때문입니다.
function MyComponent(props) {
const { processedData } = props;
return (
<div>
...
</div>
)
}
export default MyComponent;
이 코드처럼 UI만을 담당하는 컴포넌트와 실제 비동기 로직분리함으로써, 각자의 역할이 명확하게 나눠지고 이로 인해 UI 테스트 또는 로직에 대한 테스트를 하기 편리해질 뿐만 아니라 컴포넌트나 모듈의 재사용성도 올라가게 됩니다.
아래 그림은 위에 나온 두 가지 형태의 코드를 함께 나타낸 것입니다.
Redux와 리액트 관점에서 다시 설명해보면 Redux에서는 비동기 로직이나 Side Effects를 포함한 다양한 로직을 처리하는 역할만 하고, 리액트 컴포넌트는 이렇게 처리된 데이터를 props로 받아서 받은 데이터를 단순히 화면에 뿌리는 역할만 하는 것이죠.
마지막 업데이트: 2023년 07월 14일 00시 00분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.