[React] 26. 리덕스(Redux) 작동 방식

이전 글을 읽고 오시는 것을 추천드립니다.

(이전 글 : 리덕스 vs 리액트 컨텍스트 : https://arnopark.tistory.com/858)

 

---

Redux : 중앙 데이터 저장소

Redux[리덕스]는 앱에 있는 '중앙 데이터(state) 저장소'입니다. 정확히 한 개의 저장소로, 절대로 2개 이상을 갖지 않습니다.

이 하나의 저장소에 앱의 모든 state를 저장합니다. (cross-component state, app-wide state 모두를 저장합니다.)

 

하나의 저장소에만 모든 걸 저장하니 관리가 어려워 보일 수 있지만, 다행히도 저장소 전체를 항상 직접 관리할 필요가 없습니다. (이에 대해선 이번 강의와 다음 강의를 통해서 설명할 예정입니다.)

 

 

 

---

컴포넌트와 저장소 간의 연결방법 : 구독하기

중앙 데이터 저장소에 state를 저장해서, 여러 컴포넌트 안에서 이 state를 사용할 수 있습니다.

만약 state의 값이 변경되면, 컴포넌트에서 이를 인지한 후 UI 업데이트가 되기를 원할 것입니다. 이걸 구현하기 위해, 컴포넌트에서 중앙 저장소를 구독하도록 설정합니다. 컴포넌트가 저장소를 구독하면, state가 변경될 때마다 저장소가 컴포넌트에게 소식을 알려줍니다. 그러면 컴포넌트는 필요한 최신 데이터를 받습니다.

 

 

 

---

저장소 안의 데이터를 수정하는 방법은? : Reducer(리듀서) 함수

반대로, 컴포넌트에서 직접 저장소 안의 state를 변경하고 싶다면 어떻게 해야 할까요?

아주 중요한 규칙이 하나 있습니다. 컴포넌트는 절대로 저장된 데이터를 직접 조작하지 않아야 합니다. 그래서 state를 받아올 때도 '구독'만 하는 형태입니다.

대신에 'Reducer[리듀서]'라는 개념을 이용합니다. 리듀서 함수를 만들고, 그 함수를 통해서 저장소 안의 state값을 수정할 수 있습니다.

참고로, 이때 리듀서 함수는, useReducer() 훅과는 다릅니다.

 

 

*리듀서 함수의 의미

리듀서 함수는 일반적으로는 '입력을 받아서 그 입력을 변환하고 줄이는 함수'를 뜻합니다. ( Ex: Number 값이 여러 개가 담긴 Array를, 그 값들의 총합으로 줄이는 함수. <- Array.prototype.reduce() )

즉, 입력(input)을 변환해서 새로운 출력, 결과(output)를 return 하는 함수입니다.

 

 

 

---

Reducer(리듀서) 함수의 작동방식

리듀서 함수가 있고, 저장소로부터 데이터를 구독하는 컴포넌트가 존재한다면, 이 둘을 어떻게 연결할까요?

 

1. 리듀서 함수의 트리거가 되는 컴포넌트에서 'Action' 객체를 리듀서 함수로 전달(dispatch, 발송)합니다. Action 객체에는 '원하는 작업'이 담겨 있습니다.
2. 중앙 저장소에 있는 리듀서 함수는 Action 객체를 전달 받습니다.
3. 리듀서 함수는 Action 객체 안에 담긴 '원하는 작업'을 읽고, 그 작업을 찾아서 수행합니다.
4. 작업을 마친 리듀서 함수는 새로운 state를 뱉어내고, 이게 중앙 저장소로 들어가서 기존의 state를 대체합니다.
5. state가 업데이트 되면, 그 state를 구독 중이던 모든 컴포넌트가 알림을 받고, 새 state에 맞춰서 UI를 업데이트 합니다.

 

 

이것이 리덕스의 작동방식입니다.

 

 

 

다음 강의에서, 실제 리덕스 저장소를 만드는 코드를 작성해보겠습니다.