또 한번 멘붕.
같이 공부하시는 동기님이 뒤에 나올 쓰로틀은 더 어렵다고 하셔서
우선 리덕스.. 행복해하며 공부해볼게요 ~
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 쓰자!"
출처 : 오즈코딩스쿨 학습자료, 리덕스 공식문서, 챗지피티
'Studying > React' 카테고리의 다른 글
리액트 공부하기 - 구성을 잘 하는 법, 초보자 동기부여.. (0) | 2025.05.02 |
---|---|
리액트 공부하기 - 리덕스 툴킷 (0) | 2025.04.29 |
리액트 공부하기 - 리덕스 (0) | 2025.04.28 |
리액트 공부하기 - React Router 리액트 라우터 (0) | 2025.04.25 |
리액트 공부하기 - 전역 상태 관리 context API (0) | 2025.04.24 |