Redux의 작동 원리 (쉬운 설명)
React 컴포넌트 간에 데이터를 전달하는 것은 종종 '전화기 게임(말 전달하기 게임)'처럼 느껴지곤 합니다. 부모에서 자식으로, 다시 손자 컴포넌트로 데이터를 전달해야 하죠. 앱이 커질수록 이 과정은 매우 복잡해집니다.
Redux는 이 문제를 해결합니다. Redux는 '단일 진실 공급원(single source of truth)'을 만듭니다. 데이터가 여기저기 흩어져 있는 대신, 모든 데이터가 하나의 중앙 금고에 저장됩니다.
Redux를 이해하기 위해 커피숍을 예로 들어보겠습니다.
The Store (금고) 이것은 매장의 장부입니다. 원두 수량, 주문 내역, 직원 명단 등을 기록합니다.
The Action (주문)
고객은 카운터에서 라떼를 그냥 집어가지 않습니다. 주문을 하죠. Action은 어떤 일이 일어났는지를 설명하는 단순한 객체입니다.
예시: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (바리스타) 바리스타는 장부를 업데이트할 수 있는 유일한 사람입니다. 바리스타는 현재 상태(state)와 새로운 주문을 받아, 장부의 새로운 버전을 만듭니다.
The Dispatch (계산원) 계산원은 고객의 주문을 받아 바리스타에게 전달합니다. Dispatch는 Action을 Store로 보내는 함수입니다.
왜 Redux를 사용해야 할까요?
앱이 확장되어 사용자 프로필이나 장바구니 기능이 포함되더라도, 중앙 Store가 있으면 디버깅이 쉬워집니다. Action 히스토리를 살펴보며 데이터가 언제, 왜 변경되었는지 확인할 수 있습니다. 마치 웹사이트를 위한 블랙박스(비행 기록 장치)와 같은 역할을 합니다.
요약:
• Action: 변경 사항을 설명하는 메모. • Reducer: 변경을 수행하는 로직. • Dispatch: Action을 로직으로 전달하는 트리거.
Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp