본문 바로가기

Web/Redux

[Redux] 원리 및 불변성

흐름

- 중앙저장소( state) - action - dispatch - reducer로 연결이 되어있다

- action을 dispatch하면 reducer에 명시한 방법에 따라 값을 불변성으로 변경하여 중앙저장소에 저장한다

 

장점 / 단점

- action의 추적이 가능하고 내역 확인이 되기 때문에 버그 발생시 수정이 매우 편리함

- 데이터의 rollback이 가능하기에 테스트하기 편하다( redux devtools)

- 데이터를 바꾸고 싶을때마다 action을 만들고 reducer를 정의해줘야하기 때문에 코드량이 매우 많아진다. 이러한 문제점을 해결하기 위해 Redux toolkit이 개발되었다

 

사용

- reducer에 불변성으로 데이터를 넘기는 이유는 불변성 넘기는 것은 객체를 새로 생성하는 것이고 이전 객체의 기록이 남아 있어야 데이터 추적이 가능하기 때문이다. 참조 관계로 해버리면 prevState의 내역이 사라지기 때문에 추적이 불가능하다( immer를 사용하여 불변성을 편리하게 처리 가능)

- 메모리 낭비를 막기 위하여 객체를 새로 만들지 않고 spread 문법을 사용하여 변경되는 것들만 변경하고 변경되지 않는 것들은 참조관계를 유지함

- Redux가 배포모드시에는 메모리를 계속 비우기 때문에 메모리의 문제가 발생하지는 않는다

- 데이터의 history가 쌓이면 보안에 취약 할 수 있으므로 배포용시에는 devtools를 연결하지 않아야한다

 

 

'Web > Redux' 카테고리의 다른 글

[Redux] 비동기 처리  (0) 2021.06.17
[Redux] redux-saga  (0) 2021.06.17
[Redux] dummy 데이터  (0) 2021.06.17
[Redux] reducer 분할하기  (0) 2021.06.17