[Redux] Redux란?

누리·2022년 11월 6일
0

전역상태관리

목록 보기
2/3

Redux란?

자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다

  • 단방향 데이터 흐름을 이용해 예측 가능하고, 일관적인 상태 컨테이너의 역할을 제공하는 라이브러리
  • Flux 패턴에 영감을 받아서 Dan Abramov가 개발
  • Flux는 디자인 패턴으로, 일종의 실체가 없는 개념이지만 Redux는 이 패턴을 적용해 자바스크립트로 구현한 구현체이다
  • React 또는 다른 View 라이브러리와 함께 사용가능

Redux 원칙 3가지

  • 진실은 하나의 소스로부터 (Single source of truth)
  • 상태는 읽기 전용이다 (State is read only)
  • 변화는 순수 함수로 작성되어야 한다 (Changes are made with pure functions)

1. 진실은 하나의 소스로부터

  • 애플리케이션의 모든 상태(State)는 하나의 저장소(Store) 안에 하나의 객체 트리 구조로 저장됨
  • 여러 개의 저장소를 관리하는 것이 아니라, 단 하나의 자바스크립트 객체로만 데이터를 저장

2. 상태는 읽기 전용이다

  • 상태(state)는 읽기 전용, 즉 Store에 직접 접근해서 state를 수정할 수 없다는 뜻이다
  • 상태(state)를 수정할 수 있는 유일한 방법은 Action 객체를 Dispatch를 통해서 Store에 전달하는 것 뿐
  • 상태(state)를 업데이트하는 방식과, 시점을 제한해서 예측 가능성을 증대시킨다

3. 변화는 순수 함수로 작성되어야 한다

  • 전달된 Action을 통해서 State를 변경해야하는데 이때 모든 변화는 순수 함수로 작성되어야 한다
    (순수함수 : 사이드 이펙트가 없는 함수로, 같은 Input에 대해 같은 Output을 보장할 수 있다)
  • 순수 함수를 이용하면 상태의 변화를 예측 가능하게 할 수 있다
  • Redux에서 state의 변화를 책임지는 순수 함수를 Reducer라고 부른다
    (Reducer : 이전의 state와 action객체를 input으로 받아서 새로운 state를 return하는 함수)

Redux의 데이터 흐름

View에서 event 발생 > Action객체 생성 > Dispatch로 Action 전달 > (Middleware) > Reducer > Store의 state 변경 > UI 반영

Redux 주요개념

  1. View : 유저가 사용하는 화면, 버튼 등 UI 요소
  2. Action & Action Creator
  • Action : 상태 변화에 대한 의도를 표현하는 단순한 자바스크립트 객체

    • type property는 필수적으로 가져야하며 (의도표현), 그 외의 property는 원하는대로 설정가능
  • Action Creator : Action 객체를 만드는 함수

    • Action객체를 매번 필요한 곳에서 손수 작성하는 것 보다 Action Creator 함수를 이용해 중복을 제거하고 Action을 만드는 과정에서 실수를 방지할 수 있다
  1. Dispatcher : dispatch는 발송하다의 의미로, Action객체를 Store의 Reducer에 전달하는 역할을 담당한다
  • Redux에서는 store.dispatch(액션객체)의 형태로 제공
  • 동기적으로 처리되도록 작성되었기에 비동기 Action을 처리할 수 없다
    (비동기적인 처리가 필요할 경우 Middleware을 활용해야함 : Action을 다시 Dispatch)
  1. Reducer : 이전 state 와 Action객체를 받아서 새로운 state를 리턴하는 순수 함수
  • Store가 하나이기에 Reducer도 하나로 만들어져야한다 그래서 모든 관심사가 한 함수에 합쳐지면 유지보수에 어려움이 생김

    Redux에서는 각각의 로직을 관심사별로 분리해서 SliceReducer를 만든 후 combineReducer 함수를 통해서 rootReducer를 만드는 방식을 사용한다

  1. Store : Redux의 전체 state를 관리하는 하나의 객체
  • store객체를 직접 선언해 만들 필요는 없으며 rootReducer로 부터 createStore 함수를 이용해서 생성
  1. Middleware : Action이 Dispatch를 통해서 Reducer에 전달되기 전 중간 처리를 담당하는 부분으로 필수적인 요소는 아니다. (필요시 활용)
  • 비동기 API호출, 로깅 등의 사이트 이펙트를 위해 많이 사용
  • 자주사용되는 Redux의 미들웨어 라이브러리는 redux-thunk, redux-saga등이 있다
profile
프론트엔드 개발자

0개의 댓글