리덕스(Redux) 이란?

 

리액트의 상태를 잘 관리하기 위해 리덕스의 언급이 많았다.

리덕스란 무엇인지. 어떻게 사용해야하는지 알아보도록하자.

 

 

---

 

💖 리덕스(Redux) 이란?

1. 리덕스(Redux)는 Javascript app을 위한 예측가능한(predictable) state container이다. 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구입니다. 

 

2. 리덕스(Redux)는 리액트 뿐만 아니라 Augular, jQuery, vanilla JavaScript 등 다양한 framework와 작동되게 설계되었다. 즉, 리액트만을 위한 Library는 아니다.

 

3. 리덕스(Redux)는 리액트의 멋진 보완재이다. action에 반응하여 상태를 변경하기 때문에, 리액트 같이 UI를 상태에 대한 함수로 기술하는 프레임워크와 특히 잘 어울리기 때문이다.

 

4. 리덕스(Redux)는 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 유지 보수성을 높이고 작업 효율도 극대화 해주며, 미들웨어기능을 제공하여 비동기를 훨씬 효율적으로 관리 하게 해준다.

 

 

🎁 리덕스(Redux) 공식문서 : https://ko.redux.js.org/ 🎁​

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux

 

 

✨ 안정적으로 관리하기 위한 리덕스의 3가지 기본 원칙

 

1. 첫 번째 원칙

Single source of truth = 단일 스토어 사용을 권장한다.
데이터는 같은 곳에서 가져온다. 즉, 데이터를 저장하는 공간, store에서 데이터를 주고받는다 라고 이해할 수 있습니다.

- 하나의 애플리케이션에는 하나의 스토어를 사용하는 것을 권장합니다.

 

 

2. 두 번째 원칙

State is read-only = 상태는 읽기 전용이여야 한다.
action이라는 객체를 통하여 리액트의 setState가 상태 변경하는 역할을 리덕스에서 할 수 있다.

- 배열 형태의 상태가 있는데, 로직에 의해 배열에 새로운 값을 넣어주어야 한다면 기존 상태에 새로운 값을 직접 push하는 것이 아니라 concat과 같은 함수를 통해 새로운 값을 이어붙여 생성한 새로운 배열로 교체하여 업데이트해야 합니다.

- 이러한 업데이트 방식을 사용하면 불변성이 유지됩니다.

- 불변성이 유지된 업데이트는 리덕스의 변화 감지 방법인 shallow equality에 적합한 상태 변화이기 때문에 이러한 업데이트 방법을 사용합니다.

 

 

3. 세 번째 원칙

Changes are made with pure functions = 순수한 함수여야만 한다
reducer는 순수 함수에서 사이드 이펙트의 영향을 받지 않는다. 불변성을 지킨다.

- 순수한 함수라는 것은 동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수를 말합니다. 우리가 클릭을 통해 액션을 발생시키면, 배경색이 랜덤으로 바뀌는 로직을 작성한다면, 함수의 로직 내에서 랜덤값을 생성해야 합니다. 랜덤값을 생성한다는 뜻은 결국 매번 출력이 바뀐다는 뜻이기 때문에 순수하지 못한 함수입니다.

- 또한, 네트워크의 요청을 하는 작업도 마찬가지로 순수하지 못한 로직 중 하나입니다.

 

 

 

 

 

---

 

📑 리덕스를 사용하는 이유

 

리덕스를 사용하는 가장 큰 이유는 공통적으로 이용하는 상태를 전역에서 관리를 하기 위함입니다.
프로젝트가 커지면서 컴포넌트구조가 복잡해질 경우 리덕스를 이용하면 유지보수, 코드작성의 효율성을 극대화 해줍니다.

리덕스 사용에 관한 쉽게 풀어준 이미지

 

 

리덕스를 사용하면, 스토어를 사용하여 상태를 컴포넌트 구조 바깥에 두고 스토어라는 중간자를 통해 상태를 업데이트하거나, 새로운 상태를 전달받습니다.

 

즉 위와 같이 상태값을 컴포넌트에 종속시키지 않고, 상태관리를 바깥에서 할 수 있게 해줍니다. 

 

 

 

---

 

 

출처 - 생활코딩

리덕스를 사용하여 복잡했던 상태 관리를 store에 중심으로 상태 관리를 담당하게 하여 보다 간단한 상태 관리를 할 수 있다는 것을 보여주는 내용입니다.

 

 

 

 

 

---

 

💻 리덕스 구성요소 와 상호 관계 혹은 작동

 

출처 - 코드스테이츠

 

첫째, store는 상태가 관리되는 오직 하나의 공간입니다.
둘째, action은 자바스크립트 객체 타입이며 store에 전달할 payload(데이터)를 dispatch에 전달합니다.
셋째, action객체를 전달받은 dispatch는 reducer를 호출합니다.
마지막으로, reducer는 현재 state와 action을 이용하여 다음 state를 만듭니다.

-이런 절차는 데이터 흐름이 한 방향으로 흘러야 하기 때문이라고 합니다.