⭐️ Redux를 사용하는 이유가 무엇인가요?
⭐️ Redux의 장단점에 대해 설명해주세요
📌 Redux?
Redux는 애플리케이션 상태를 관리하고 중앙 집중화하기 위한 오픈 소스 JavaScript 라이브러리입니다. 사용자 인터페이스를 구축하기 위해 React 또는 Angular와 같은 라이브러리와 함께 가장 일반적으로 사용됩니다.
📌 Redux 사용 이유
Here are some suggestions on when it makes sense to use Redux: (redux.js.org)
- 앱의 여러 위치에서 필요한 많은 양의 states 존재할 때 (전역 상태가 필요하다고 느껴질 때)
- State를 업데이트 하는 데이터가 계속 변할 때
- State를 업데이트 하는 로직이 복잡할 때
- 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
- 최상위 component에 State를 모두 담는게 한계일 때
📌 Redux 장단점
장점
- Centralized state management system = 중앙 집중식 state 관리 시스템
React State는 component 내에 로컬로 저장됩니다. 이 상태를 애플리케이션의 다른 구성 요소와 공유하기 위해 props가 하위 구성 요소에 전달되거나 callbacks이 상위 구성 요소(parent components)에 사용됩니다. 반면에 Redux State는 global(전역적)으로 저장됩니다. 전체 응용 프로그램의 모든 components 데이터에 직접 쉽게 액세스할 수 있습니다. 이렇게 하면 모든 데이터가 중앙 집중화되고 component가 필요한 state를 매우 쉽게 얻을 수 있습니다. 따라서 많은 components가 있는 크고 복잡한 응용 프로그램을 개발하는 동안 Redux 저장소가 매우 선호됩니다.
Store라는 이름의 전역 자바스크립트 변수를 통해 상태를 한 곳에서 관리하는데, 이를 중앙화라 함. 전역 상태를 관리할때 굉장히 효과적
- Performance Optimizations = 성능 최적화
기본적으로 component가 업데이트 될 때마다 React는 구성 요소 트리의 해당 부분 안에 있는 모든 구성 요소를 재 랜더링합니다. Component에 대한 데이터가 변경되지 않은 경우 이러한 재 렌더링은 낭비입니다 (화면에 표시된 UI 출력이 동일하게 유지되기 때문). Redux 저장소는 이렇게 불필요한 재 렌더링을 건너뛰고 데이터가 실제로 변경된 경우에만 지정된 구성 요소가 재 렌더링 되도록해 성능을 개선하는데 도움이 됩니다.
- Pure Reducer Functions = 순수 리듀서 함수
순수 함수는 입력 데이터를 변경하지 않고 외부 상태에 의존하지 않으며 동일한 입력에 대해 동일한 출력을 일관되게 제공할 수 있는 모든 함수로 정의됩니다. React와 달리 Redux는 이러한 순수한 기능에 의존합니다. 주어진 상태(객체)를 취하여 루프의 각 감속기에 전달합니다. 데이터가 변경되면 리듀서에서 새 객체가 반환됩니다(재 렌더링이 발생함). 그러나 변경 사항이 없는 경우(재 렌더링 없음) 이전 개체가 반환됩니다.
- Storing long-term data = 장기 데이터 저장
Redux에 저장된 데이터는 페이지 새로고침까지 지속되기 때문에 API에서 불러온 데이터, 폼을 통해 제출된 데이터 등 사용자가 애플리케이션을 탐색하는 동안 필요한 장기 데이터를 저장하는 데 널리 사용된다. 반면에 React는 빠르게 변경될 수 있는 단기 데이터(양식 입력, 토글 등)를 저장하는 데 적합합니다.
- Time-travel Debugging
React에서 디버깅 프로세스 동안 애플리케이션의 State를 추적하는 것은 지루한 작업이 됩니다. Redux는 애플리케이션 디버깅을 쉬운 프로세스로 만듭니다. 특정 시점에서 애플리케이션의 전체 상태를 나타내기 때문에 시간 여행 디버깅에 널리 사용됩니다. 완전한 오류 보고서를 서버로 보낼 수도 있습니다.
- Redux는 상태를 읽기 전용으로 취급한다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 됨. 이런 식으로 실행 취소 기능을 구현.
리덕스는 위 그림처럼 단방향으로 데이터가 흐른다. 즉 버그를 예측하기쉽다. 내가 어떤 액션을 실행하였고 어떻게 데이터가 흐르는지 예측이 가능하여 디버깅이 매우 용이하다. 그리고 기록이 남아서 이전 상태로도 되돌아 갈 수도 있다. 그리고 여러번 말했지만 데이터의 중앙집권화이다.
단점
- 최초 코드 작성이 복잡하다. 아주 작은 기능이여도 리덕스로 구현하는 순간 몇 개의 파일(액션등을 미리 만들어놔야함)들을 필수로 만들어야하여 코드량이 늘어난다. State 업데이트에 맞는 액션값들과 dispatch 함수들 그리고 reducer 등 초기에 우선으로 만들어 줘야하는 복잡성이 있다. 프로젝트가 커지고 상태값들이 많아지면 액션값들이 몇십개는 늘어난다. 이 단점을 보완하기위해 여러가지 라이브러리들이 출시되었다. 그중 리덕스 툴킷이 제일 유명하다.
Sources:
https://www.geeksforgeeks.org/what-are-the-advantages-of-using-redux-with-reactjs/
