React.js - redux - 리액트 리덕스

Redux(리덕스)란 무엇인가요?

 

Redux는 React(뿐만 아니라 다른 JavaScript 라이브러리/프레임워크)에서 **애플리케이션의 상태(State)를 효율적으로 관리하기 위한 예측 가능한 상태 컨테이너(Predictable State Container)**입니다. 

쉽게 말해, 웹사이트가 복잡해지면서 여러 컴포넌트들이 데이터를 공유하고 변경해야 할 때, 데이터를 여기저기 흩뿌려놓지 않고 한 곳에 모아서 체계적으로 관리하게 해주는 도구라고 생각하시면 됩니다.

---

---

왜 Redux가 필요한가요? (고민 해결사)

---

우리가 이전에 배웠던 Props와 State를 생각해 보세요.

State: 

컴포넌트 내부에서만 관리되는 데이터였죠.

Props: 

부모에서 자식으로 데이터를 전달하는 방식이었고요.

---

그런데 애플리케이션이 커지면서 다음과 같은 문제가 생길 수 있어요.

Props Drilling (프롭스 드릴링): 

멀리 떨어진 자식 컴포넌트에 데이터를 전달하기 위해 중간에 필요 없는 많은 컴포넌트들을 거쳐서 Props를 계속해서 내려줘야 하는 불편함.

컴포넌트 간 데이터 공유의 어려움: 

서로 연관 없는 형제 컴포넌트나 아주 다른 위치에 있는 컴포넌트들끼리 데이터를 주고받기가 어려움.

---

Redux는 이런 문제들을 해결하기 위해 **앱 전체의 모든 중요한 상태(Global State)**를 한 곳(Store)에 모아 관리함으로써, 어떤 컴포넌트든 필요한 데이터에 직접 접근할 수 있게 해줍니다.

---

---

Redux의 세 가지 핵심 원칙 

Redux는 데이터를 효율적으로 관리하기 위해 세 가지 중요한 규칙을 따릅니다.

---

하나의 진실된 원천 (Single Source of Truth) - Store:
앱 전체의 모든 상태(State)는 단 하나의 거대한 객체 트리 형태로 하나의 Store 안에 저장됩니다.  

앱의 '뇌'나 '중앙 통제실'이라고 생각하면 돼요. 

---

상태는 읽기 전용 (State is read-only):
상태를 직접 변경할 수 없습니다. 

오직 **액션(Action)**을 통해서만 상태를 변경할 수 있습니다.  

액션은 '무슨 일이 일어났는지'를 설명하는 단순한 JavaScript 객체입니다.

---

순수 함수로만 변경 가능 (Changes are made with pure functions) - Reducer:
액션에 의해 상태를 변경하는 것은 **리듀서(Reducer)**라는 순수(Pure) 함수만이 할 수 있습니다. 

리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환합니다. 

이 과정은 항상 예측 가능하며, 동일한 입력에 대해 항상 동일한 출력을 보장합니다.  

---

---

Redux의 주요 구성 요소와 데이터 흐름

---

여러분에게 하나의 은행 계좌가 있다고 상상해 보세요.

---

State (상태):

은행 계좌의 현재 잔액입니다. (예: 100 달러)

앱에서 State는 화면에 보여지거나 앱의 특정 기능을 결정하는 현재 데이터를 의미해요. 

예를 들어, 게시물 목록, 사용자 로그인 상태, 카운터의 숫자 등이 될 수 있죠.

---

Action (액션):

잔액을 변경하고 싶을 때 작성하는 **'요청서'**입니다. (예: "50 달러 입금 요청", "20 달러 출금 요청")

Action은 **'무슨 일이 일어났는지'**를 설명하는 간단한 JavaScript 객체입니다. 

직접 상태를 바꾸는 게 아니라, 상태를 바꾸기 위한 **'의도'**만 전달하는 거예요. 

보통 { type: 'INCREASE', payload: 10 } 와 같은 형태로, type으로 어떤 변화인지, payload로 추가적인 데이터(얼마나 바꿀지)를 전달합니다.

---

Dispatch (디스패치):

작성한 요청서(Action)를 은행원에게 건네는 행위입니다.

Dispatch는 Action 객체를 Reducer에게 전달하는 함수입니다. 

우리가 직접 Reducer를 호출하는 게 아니라, Dispatch 함수를 통해 Action을 '보내기'만 하면 됩니다.

---

Reducer (리듀서):

요청서(Action)를 받아서 잔액을 실제로 계산하고 업데이트하는 '은행원' 입니다. 

은행원은 현재 잔액(State)과 요청서 내용(Action)을 보고, 새로운 잔액을 계산해서 반환합니다.

Reducer는 (현재 State, Action)을 인자로 받아서 **새로운 State를 반환하는 '순수 함수'**입니다. 

이 함수 안에서만 상태 변경 로직이 일어납니다.

---

Store (스토어):

은행의 중앙 전산 시스템입니다. 

모든 고객의 계좌 잔액(State)이 이곳에 안전하게 보관되고 관리됩니다.

Store는 애플리케이션의 모든 State를 보관하는 '중앙 저장소' 역할을 합니다. 

Redux에서는 이 Store가 하나로 통합되어 앱 전체의 상태를 관리하고, React의 useReducer에서는 해당 컴포넌트 내부의 상태를 관리하는 것이 작은 Store와 유사하게 작동합니다.

---

---

관계 및 데이터 흐름

---

이 모든 것들이 React에서 다음과 같은 흐름으로 서로 연결되어 동작합니다.

---

사용자 인터랙션: 

사용자가 버튼을 클릭하거나(예: "증가" 버튼), 데이터를 입력합니다.

---

Action 생성: 

이 행동에 맞는 Action 객체(예: { type: 'INCREMENT' })를 생성합니다.

---

Dispatch 호출: 

생성된 Action을 dispatch 함수에 넣어 보냅니다. (dispatch({ type: 'INCREMENT' }))

---

Reducer 실행: 

dispatch가 Action을 Reducer에게 전달하면, Reducer는 현재 State와 전달받은 Action을 분석합니다.

---

새로운 State 반환: 

Reducer는 이 Action에 따라 State를 어떻게 변경할지 결정하고, 새로운 State를 계산하여 반환합니다.

---

Store 업데이트: 

반환된 새로운 State로 Store(또는 useReducer의 경우 해당 컴포넌트의 내부 상태)가 업데이트됩니다.

---

UI 렌더링: 

State가 변경되었으므로, React는 변경된 State를 사용하는 컴포넌트들을 자동으로 다시 렌더링하여 화면을 최신 상태로 업데이트합니다.

---

이러한 흐름은 단방향으로 이루어져, 상태 변화를 예측하기 쉽고 디버깅하기 용이하다는 장점이 있습니다.

---

---

React와 Redux 연동 (react-redux 라이브러리)

---

React와 Redux를 함께 사용하려면 **react-redux**라는 라이브러리를 사용합니다.

---

Provider: 

React 컴포넌트 트리에 Redux Store를 연결하여, 하위 컴포넌트들이 Store에 접근할 수 있게 해줍니다.

---

useSelector(): 

Redux Store의 상태(State)에서 필요한 데이터를 가져올 때 사용하는 Hook입니다. 

---

useDispatch(): 

Redux Store에 액션을 보낼(dispatch) 때 사용하는 Hook입니다.

---

---

Redux가 필요한 경우

---

애플리케이션의 크기가 크고 복잡할 때

전역적으로 관리되어야 하는 상태가 많을 때

상태의 변경 로직이 복잡하고 예측 가능해야 할 때

협업하는 개발자가 많을 때 (일관된 상태 관리 패턴 제공)

---

Redux는 강력하지만, 작은 프로젝트에는 useState나 useContext만으로도 충분할 수 있습니다. 

프로젝트의 규모와 복잡도에 따라 적절히 선택하는 것이 중요합니다.

---

---

react-redux install

---

# If you use npm:
npm install redux
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

 

터미널에서 설치 합니다.

리덕스/리액트리덕스 두개 다 설치 합니다.

---

---

 

https://react-redux.js.org/

React Redux | React Redux

---

https://react-redux.js.org/introduction/getting-started

Getting Started with React Redux | React Redux

---