[리액트] 리덕스의 장점, 단점

◼ 리덕스란?

가장 많이 사용하는 리액트 상태 관리 라이브러리로 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구 입니다. 

 

◼ 리덕스를 왜 쓸까? 

 - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.

 - 컴포넌트끼리 똑같은 상태를 공유해야할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있다.

 - 규모가 큰 경우에는 리덕스를 사용하여 작업하는것이 상태를 체계적으로 관리할 수 있고, 코드의 유지 보수성을 높여주고, 작업 효율을 극대화해준다.

 - 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리해줌

 

◼ 기본 개념정리

1) 액션

 - state를 어떻게 바꿀지 적어놓은 행동

2) 액션 생성 함수

 - 액션 개체를 만들어주는 함수

3) 리듀서

 - 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 그 두 값을 참조하여 새로운 상태(객체)를 만들어낸다(대체)

4) 스토어

 - 한개의 프로젝트는 하나의 스토어만 가짐. 현재 애플리케이션 상태와 리듀서가 들어가 있다. 그 외에도 내장함수 몇가지가 있다.

5) 디스패치

 - 스토어의 내장함수 중 하나로, 액션을 실행한다

6) 구독 

 - 스토어의 내장함수 중 하나로, subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될때마다 호출 된다.

7) 미들웨어

 - 디스패치와 리듀서 사이에서 역할!! 

 

◼ 리덕스에서 불변성을 유지해야 하는 이유

내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문. 이를 통하여 객체의 변화를 감지 할 때 객체의 깊숙한 안쪽까지 비교를 하는 것이 아니라 겉핥기 식으로 비교를 하여 좋은 성능을 유지할 수 있는 것

(리덕스는 주어진 상태(객체)를 가져와서 loop의 각 리듀서로 전달한다.
그리고 변경사항이 있는 경우 리듀서의 새로운 객체를 리턴하고, 변경사항이 없으면 이전 객체를 리턴한다.

리덕스는 두 객체(prevState,newState)의 메모리 위치를 비교하여 이전 객체가 새 객체와
동일한지 여부를 단순 체크한다. 만약 리듀서 내부에서 이전 객체의 속성을 변경하면 새 상태 와 이전 상태가 모두 동일한 객체를 가리킨다. 그렇게 되면 리덕스는 아무것도 변경되지 않았다고 판단하여 동작하지 않는다.)

 

◼ 장점

 

1) 단방향 모델링(한가지 방향으로만 바뀐다)임. action을 dispatch 할때마다 기록(history)이 남아 에러를 찾기 쉽다. 타임머신 기능을 사용할 수 있음

2) 상태의 중앙화 : 스토어(Store)라는 이름의 전역 자바스크립트 변수를 통해 상태를 한 곳에서 관리하는데, 이를 중앙화라 함. 전역 상태를 관리할때 굉장히 효과적

3) Redux는 상태를 읽기 전용으로 취급한다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 됨. 이런 식으로 실행 취소 기능을 구현.

 

◼ 단점

 

1) 아주 작은 기능이여도 리덕스로 구현하는 순간 몇 개의 파일(액션등을 미리 만들어놔야함)들을 필수로 만들어야하여 코드량이 늘어난다.

2) 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 함

3) Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않습니다. 때문에 상태를 실수로 직접 변경하지 않도록 항상 주의해야 합니다. 이를 예방하기 위해 Immutable.js같은 라이브러리도 존재합니다.

4) 다른 것 다 필요 없고 상태 관리를 중앙화하는 것만 있어도 된다면 Context API 를 사용