18. 리덕스에 뛰어들기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

Redux

• Redux는 Context API의 대안으로 리액트에서 가장 많이 사용되는 상태 관리 라이브러리다.

 

언제 무엇을 사용해야 할까?

• Context API => 앱의 규모가 적고 단순한 전역 상태 관리를 해야할 때
• Redux => 앱의 규모가 크고 전역 상태 관리를 체계적으로 해야할 때

---

Redux 작동방식

리덕스는 애플리케이션에 있는 하나의 중앙 데이터 저장소이다. (여기서 Data는 State를 가리킴)

이제 저장소는 모든 상태 데이터를 관리하게 된다.

중앙 저장소

데이터가 변경되면 컴포넌트는 변경된 데이터에 맞춰 UI를 변경하려고 한다. 그러기 위해 컴포넌트는 저장소에 구독을 설정하고 저장소는 데이터가 변경될 때마다 컴포넌트에게 알려준다. 

그러면 컴포넌트는 데이터가 변경된 것을 인지하고 필요한 데이터를 불러온다. ( 예를 들면, 인증 상태 같은 것)

 

즉 컴포넌트는 저장소의 일부를 받게되어 그것을 사용하는 것이다.

그럼 데이터의 변경은 어떻게 하는 것일까?  리액트의 구조상 데이터는 반대 방향으로 흐를 수 없다.

컴포넌트가 직접 저장소의 데이터를 제어하는 것도 아니다. 

그 대신 리듀서라는 개념을 사용한다.

---

Reducer 함수

데이터의 변형을 담당하는 리듀서 함수를 중앙 저장소에 설정한다.

여기서 알아야 할 점은 리듀서 함수는 우리가 알고 있는 useReducer 훅과 다르다는 점이다.

리듀서 함수는 입력을 받아서 그 입력을 변환하고 줄여 새로운 출력을 반환한다.

즉, 리듀서 함수는 저장소 데이터의 업데이트를 담당한다고 볼 수 있다.

이제 우리는 컴포넌트와 리듀서 함수를 연결해야 한다.

---

Action

어떤 컴포넌트의 버튼을 클릭하면 데이터 변경을 트리거한다.

action이 있고 컴포넌트가 action을 발송한다. 그래서 우리는 컴포넌트가 어떤 action을 트리거한다고 말할 수 있다.

 

action은 단순한 자바스크립트 객체이고, 리듀서가 수행해야 할 작업이다.

아래의 그림처럼 컴포넌트가 action을 발송하고 리듀서로 전달한다.

그 action에는 리듀서가 수행해야 할 작업이 들어가 있고, 리듀서는 그 action을 수행하게 된다.

리듀서가 action의 내용들을 수행한 후 새로운 상태를 반환한다.

그 반환된 상태가 기존 상태를 대체하게 된다.

이후에 데이터 저장소의 상태가 업데이트되면, 구독 중인 컴포넌트가 알림을 받게 되고 컴포넌트는 UI를 업데이트할 수 있게 되는 것이다.