리액트 공부하기 - 리덕스 비동기 파트 thunk, async

또 한번 멘붕.

같이 공부하시는 동기님이 뒤에 나올 쓰로틀은 더 어렵다고 하셔서

우선 리덕스.. 행복해하며 공부해볼게요 ~ 

---

1. 비동기 파트 들어가기 앞서서

2. thunk 설명

3. thunk 간단 예제

---

Thunk를 사용한 비동기 논리 작성

지금까지 우리 애플리케이션의 모든 로직은 동기식이었습니다.

액션이 전달되고, 스토어가 리듀서를 실행하고 새 상태를 계산한 후, 디스패치 함수가 종료됩니다.

 

하지만 JavaScript 언어는 비동기 코드를 작성하는 여러 가지 방법을 제공하며,

우리 앱은 일반적으로 API에서 데이터를 가져오는 것과 같은 비동기 로직을 ​​사용합니다.

Redux 앱에 이러한 비동기 로직을 ​​넣을 공간이 필요합니다.

 

썽크는 비동기 로직을 ​​포함할 수 있는 특정 종류의 Redux 함수입니다. 썽크는 다음 두 가지 함수를 사용하여 작성됩니다.

• dispatch인수로 및 getState를 가져오는 내부 thunk 함수
• thunk 함수를 생성하고 반환하는 외부 생성자 함수

---

Thunk란 ?

Thunk(썽크)는 리덕스(Redux)에서 "함수를 반환하는 함수" 를 뜻합니다.
좀 더 쉽게 풀면:

"원래 바로 액션을 보내야 하는데, '조금 나중에' 보내거나, '필요할 때' 보내기 위해 액션을 함수로 감싸는 것"

입니다.

보통 비동기 작업(예: 서버에서 데이터 가져오기)을 하려고 할 때 필요합니다.

→ "미루는 액션 함수" 이렇게 생각하면 조금 더 쉽다 ! 
(바로 액션을 보내지 않고, 상황에 따라 나중에 실행할 수 있게 만드는 것)

 

디스패치가 객체만 받을 수 있는걸 넘어서, 함수를 받을 수 있게 해줌으로써, 비동기 처리를 할 수 있게끔 도와주는 것

thunk의 역할은, 객체 말고 함수도 받을 수 있게 바꿔주는 것! 그 덕분에 비동기 처리도 가능!

---

예시로 이해하기

// 일반적인 액션
const action = { type: 'ADD_TODO', payload: '공부하기' };

// Thunk 액션
const thunkAction = (dispatch, getState) => {
  // 서버 요청 같은 비동기 작업 후
  dispatch({ type: 'ADD_TODO', payload: '공부하기' });
};

• 일반 액션은 그냥 객체를 보냅니다.
• Thunk는 함수를 보냅니다. 그리고 이 함수 안에서 원하는 시점에 dispatch()를 합니다.

---

 

초간단 Thunk 예제

1. 일반 액션 (Thunk 없이)

// 그냥 액션 객체를 보냄
dispatch({ type: 'SAY_HELLO' });

• 이건 바로 실행돼요.
• 별다른 로직 없이 그냥 "SAY_HELLO" 액션을 바로 보냅니다.

---

2. Thunk 액션 (나중에 실행)

// 액션을 함수로 감쌈
const sayHelloLater = () => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch({ type: 'SAY_HELLO' });
    }, 2000); // 2초 후에 실행
  };
};

// 이렇게 보냄
dispatch(sayHelloLater());

🧠 여기서 중요한 포인트

• 바로 실행하지 않고, 2초 기다렸다가 액션을 보냅니다.
• 이게 바로 "미루는 액션" = Thunk입니다!

---

💡 팁: 왜 Thunk가 필요할까?

서버에 요청하거나, 기다려야 할 때(예: 버튼 누르고 데이터 로드),
"지금 당장" 액션을 보내면 안 되니까
👉 Thunk로 감싸서 나중에 보내는 거예요!

외워두기!

"기다릴 일 있으면 = thunk 쓰자!"

 

---

출처 : 오즈코딩스쿨 학습자료, 리덕스 공식문서, 챗지피티