[데브코스] Redux

갑자기 Redux를 시작했다. 강의에서는 따라치는 수준으로만 가르치고 Redux에 대해 근본적으로 강의하지는 않는 것 같아서 인프런 생활코딩 Redux 강의를 보고 Redux 공부를 해보기로 함

 

강의는 이거 이 퀄리티에 공짜 넘 조하요..

[지금 무료]생활코딩 - Redux 강의 | Egoing Lee - 인프런

---

Immutablity

먼저, Redux를 시작하기 전에 Javascript Immutablity 개념부터 짚어보자.

Immutability 이란? 
객체나 데이터가 생성된 이후 변경되지 않는 특성

Immutable은 자바스크립트에서만 한정적으로 적용되는 개념이 아니라, 다양한 프로그래밍 언어에서 상태관리, 함수형 프로그래밍, 버그 방지, 디버깅 등 무수한 측면에서 중요한 역할을 하는 개념이다.

 

Javascript에저는 Primitive types, 자료형이 Immutable이다. Object types(참조형)은 mutable이다.

Number	값 자체를 변경할 수 없음
String	문자열 내부는 수정 불가 (새 문자열 생성)
Boolean	값 변경 불가
null	불변
undefined	불변
Symbol	불변
BigInt	불변

 

왜 중요하지? 

상태관리에서 안정성

- React, Redux, zustand 등 상태 관리에서 주로 immutable 구조를 유지한다.

- 이전 상태를 복제하여 새로운 상태를 만들기 때문에 버그가 줄고, 변경 추적이 쉽다.

 

예측 가능성

- 값을 변경하지 않기 때문에 side effect가 없다.

- 함수형 프로그래밍에서 중요한 개념이다.

 

undo, redo 구현이 쉽다.

- 상태가 복사되어 쌓이므로, 이전 상태로 쉽게 돌아갈 수 있다. 

 

Immutable 방식으로 객체 다루기, 객체 불변성 유지 도구 등 은 글이 너무 길어지므로 다음에 한 번 정리해보고 Redux 시작

---

Redux

A Predictable state container for Javascript apps, 자바스크립트 어플리케이션을 위한 예측 가능한 상태의 저장소

복잡성-> 눈에 보이지 않아서 위험함. 소프트웨어 개발에서 가장 위험한 요소 중 하나이다. 따라서 개발자는 코드 복잡성을 낮추는 것을 추구할 수밖에 없는데, 리덕스는 애플리케이션의 복잡성을 획기적으로 낮춰, 어플리케이션의 결과를 쉽게 예상할 수 잇게 하는 도구이다.

 

리덕스의 특징

1. Single Source of Truth

단 하나의 진실의 원천, 하나의 상태를 갖는다는 것이 리덕스의 가장 큰 특징이다.

 

하나의 객체 안에 애플리케이션에 필요한 모든 상태를 중앙집중식으로 관리 한다는 것! 단 하나의 state를 유지하여, 애플리케이션의 복잡성을 낮춘다.

 

2. 외부로부터 철저히 차단한다.

데이터를 쓰고 싶다면, 디스패쳐, 리듀서를 사용해야만 수정을 가할 수 있다.

데이터를 가져갈 때도 엄격한 관리를 한다. getstate를 통해서만 가져갈 수 잇다.

즉, 외부에서 직접적으로 수정할 수 없게 하여 state가 의도적이지 않게 바뀌지 않게 방지하여, 예상가능한 상태를 유지하게 한다.

 

각각 sate 생성 시 철저히 통제, 변경 시에도 원본을 복제하고 복제한 데이터를 수정하여 새로운 원본을 만드는 방식을 사용 -> 독립적인 상태를 유지하기 때문에 Undo, redo를 매우 쉽게 처리할 수 있다.  

 

리덕스 사용 시 이전 상태까지 꼼꼼히 레코딩 하여 디버깅 시 이전 상태에 대한 참조를 통해 문제 해결을 보다 쉽게 할 수 잇따..

 

핫 모듈 리로딩 - 자동으로 변경 사항이 애플리케이션ㅇ에 반영되는 것. 애플리케이션은 리프레시 되지만 데이터는 유지되어 다시 입력할 필요가 없다. 개발 편의성 크게 향상

 

 

State와 Render

Redux의 핵심은 Store다. Store은 State가 저장되는 곳. State에 직접 접속하는 것은 절대절대 절대 안된다. 

 

 

Store을 만들 때는 Reducer을 만들어서 공급해주어야 한다. 

createStore -> store 생성, 인자로 reducer을 꼭 주어야 한다.

 

 

Render은 Redux와 상관 없이 UI를 만드는 역할을 하는 내 코드^^