늘 겸손하게

Redux - Redux 장단점 본문

Programming/React

Redux - Redux 장단점

besforyou999 2022. 8. 17. 12:43

[ Redux란? ]

 

자바스크립트를 위한 예측 가능한 state 컨테이너

 

https://besforyou.tistory.com/233

 

Redux - 왜 Redux를 사용하나요?

Redux란? 공식 페이지에서는 Redux를 "자바스크립트를 위한 예측가능한 state 컨테이너"로 정의합니다. Redux는 한 마디로 자바스크립트 상태(state) 관리 라이브러리입니다. Redux는 state 관리 라이브러

besforyou.tistory.com

 


[ Redux의 장점 ]

장점 1. 버그 예측이 쉬워진다

 

Redux는 데이터가 단방향으로 흐르고 Action에 의해서만 state가 변경되어 어디서 오류가 발생했는지 찾기가 매우 수월하다.

 

모든 Action의 dispatch는 history에 기록이 남아 버그 찾기에 수월하다.

 

또한 기록이 남아있어 time machine 기능을 사용할 수 있다.

 

장점 2. 상태의 중앙화

 

모든 상태(state)를 한곳에 모아두어 관리하기가 용이하다. 각 컴포넌트에서 상태 관리를 할 필요가 없어진다.

 

장점 3. state값을 예측 가능하게 해준다

 

React앱이 커질수록 사용하는 state가 많아지게 되는데 state가 많은 컴포넌트를 거칠수록 state값이 예측하기 힘들어진다.

 

특정 컴포넌트에 state값을 전달하기 위해 해당 컴포넌트의 조상 컴포넌트들을 거치고 거쳐가는 경우가 존재한다. 또한 특정 컴포넌트의 state값이 변경되면 부모 컴포넌트에 state값을 전달하기도 하는데 이러한 경우 여러 컴포넌트를 거치면서 state의 일관성이 떨어질 수 있다. 

 

Redux를 사용하게되면 React에서 state를 분리하여 관리할 수 있게되어 각 컴포넌트는 state값을 관리할 필요가 없어지고 state값이 예측 가능해진다.

 


Redux의 단점

단점 1. 코드량이 늘어난다

 

Redux를 이용하려면 store, Action 등을 미리 구현해놓아야 사용 가능하여 코드량이 늘어난다.

 

단점 2. 과도한 메모리 사용

 

Redux에서 모든 state는 불변값(Immutable)이므로 state를 업데이트하기 위해서 reducer 함수는 늘 새로운 state를 생성해야합니다.

 

이 복잡한 과정은 장기적인 관점에서 메모리 사용량을 과도하게 늘립니다.

 

단점 3. 앱이 복잡해짐

 

단점 4. 시간 소모 증가

 

깊이가 깊지 않은 state 관리에 Redux를 사용하면 오히려 시간을 많이 소모합니다. 

 

 

 

 

'Programming > React' 카테고리의 다른 글

React - shouldComponentUpdate()  (0) 2022.08.22
React - Prop Drilling & Context API v.s Redux  (0) 2022.08.17
React - Context API  (0) 2022.08.02
React - useLayoutEffect vs. useEffect  (0) 2022.08.01
React - React 18 새로운 점  (0) 2022.08.01