React - Redux에 대해 먼저 알아보자

nais·2022년 5월 27일

시작하며

'더 놀자' 리액트 프로젝트를 진행하며, 장바구니 기능을 추가하여 리팩토링을 진행하게 되었습니다~!

더 놀자가 뭔지 궁금하시다면?
https://github.com/thenolja/desktop

상품을 장바구니에 추가 , 삭제 시에 header 의 장바구니 옆 수량 모두 변경되어야하는 기능을 구현하기 위해서는 부모-자식 관계가 아닌 컴포넌트끼리 똑같은 상태를 공유해야하며, 여러 컴포넌트를 거치치 않고 손 쉽게 상태 값을 전달, 업데이트 할 수 있는 상태 관리가 필요하다 판단하여 Redux 를 사용하였습니다.

📌이렇게 header 수량과 실제 장바구니 페이지의 수량이 같아야한다는 점!!

오늘은 그 시작의 Redux에 대해서 정리하고 먼저 알아가는 글을 작성해보려고 합니다
제가 구현한 기능과 소스 코드는 차차 보여드리겠습니다... 🔥

상태 관리 라이브러리 Redux

Redux 는 애플리케이션의 상태를 관리하기 위한 견고하고 안정적인 솔루션
여기저기 혼란스럽게 흩어져 있는 상태를 체계화 하여 애플리케이션을 관리하도록 도와주는 역할을 한다.

상태 관리란?

서버 응당, 캐시 데이터, 로컬 상태(아직 서버에 저장되지 않은 데이터) 등을 의미합니다. 뿐만아니라 활성화된 라우트, 선택된 탭 핸들, 로딩 표시 여부, 페이지 네이션 컨트롤 등 다양한 ui view 상태도 해당됨

Redux 의 특징

예측 가능(Predictable)
중앙 관리(Centrailzed)
디버깅 용이(Debuggable)
유연한 확장성(Flexible)

Redux를 사용하기 적절한 상황

지속적인 업데이트가 이루어지는 상당한 양의 상태
상태 업데이트를 위한 단 1개의 스토어가 필요한 경우
최상위 루트 컴포넌트가 모든 상태를 관리하는 것이 적절하지 않다

📌단, 앱의 규모가 작은 경우 React 만으로 상태 관리하는 것이 더 효과적일 수 있다 (reducer 을 만들고 초기 상태를 만든 자체가 복잡하기 때문)

Redux 3원칙

애플리케이션 상태는 모두 한 곳 (객체) 에서 관리(동기화 필요 x, 디버깅이 용이 하도록 도구가 제공되기 때문이다)
상태는 불변(읽기 전용) 데이터 이며, 오직 액션을 전달해 디스패치 하는 것 만이 상태를 업데이트 할 수 있다. (이와 같은 이유로 예측이 가능)
reducer(순수 함수) 를 사용해 상태를 다음 상태로 업데이트(순수함이 보장됨)

redux 아키텍처

Store

store 는 애플리케이션의 상태를 관리하는 객체
createStore() 함수를 실행하며 store 인스턴스 생성됨
React 컴포넌트에 분산되어 있는 상태와 다르게 store 는 하나만 존재하며, 애플리 케이션에 상태를 공급하고 상태가 업데이트 되면 뷰(UI)를 다시 그림

다음과 같은 메서드를 제공


interface Store {
	getState(): State; //자신이 가지고 있는 상태를 읽게 할 수 있음(쓸수는 x)
	dispatch(action: Action): Dispatch;  // action  객체를 전달해서 요청
	subscribe(listener: Listener): Unsubscribe; //상태를 업데이트하고자 하면 view 를 등록해야한다(컴포넌트 등록) ->컴포넌트가 변경되면 발생
	replaceReducer(nextReducer: Reducer): void;// reducer 을 교체해야할 상황에 사용
}