[React] Redux

🚀 학습 목표

1. 전역 상태 관리 라이브러리로서의 Redux의 필요성을 이해한다.
2. Action, Dispatch, Reducer, Store 등 Redux의 핵심 개념을 이해한다.
3. React-Redux 라이브러리에서 제공하는 useSelector, useDispatch Hook을 사용할 수 있다.

 

Design Pattern

1. design pattern이란?

• 패턴 === 되풀이되는 사건이나 물체의 형태
• 디자인 패턴 === 설계 간 자주 발생하는 문제에 대한 모범 답안
• 프로그램을 개발하면서 생기는 문제점들에 대해서 해결할 수 있는 방법을 도출하고 그를 패턴화해둔 것

2. Design Pattern을 사용하는 이유

1) 검증된 해결책

• 바퀴를 재발명하지 마라(Don't reinvent the wheel)
• 필요한 것을 매번 만들지 말고, 이미 만들어져있는 것이 있으면 그것을 활용해라
• 이미 여러 사람들에 의해서 검증되고 해결 방안, 이를 적용하면 코드를 효과적으로 개선할 수 있음
• 패턴을 활용하면 상대적으로 저수준의 문제들은 패턴을 이용해서 해결하면서 고수준의 문제에 집중할 수 있음

2) 효율적인 소통 방식

• 개발을 하면서 원활한 소통을 위해서는 체계적인 규칙과 용어가 필요
• 디자인 패턴을 사용하면, 매번 모든 디테일한 사항들을 장황하게 설명할 필요 없이 약속해둔 용어로 표현할 수 있기 때문에 좀 더 명확하고 확실하게 소통할 수 있음

3) 유지보수 용이

• Design === 설계
• 검증된 디자인 패턴들은 코드 안에서 각자 코드들의 영역이 분리해서 관리하도록 설계되어 있음
• 변경사항이 발생하면 수정이 필요한 부분만 수정하면 되기에 유지 보수에 용이

3. Design Pattern의 종류

 MVC 

• 프로젝트의 구성 요소를 역할에 따라 Model, View, Controller 세가지로 나눠서 관리하는 패턴
  • Model은 데이터를 관리하는 역할
  • View는 사용자에게 보여지는 UI를 담당
  • Controller는 사용자의 Action에 의해 이벤트를 감지하고 처리하는 역할 즉, Model 또는 View를 업데이트하는 로직을 담당
• 각 구성요소들의 관심사의 분리(Soc, Separation of Concern)가 잘 이루어져있기에 유지보수 및 확장이 용이함

• Controller는 Model과 View 사이에서 필요한 로직을 처리
  • View에서 User의 Action이 발생하면, Controller로 해당 액션이 전달되고, Controller에서 필요한 로직을 처리 후 Model에게 접근해 데이터를 수정, 그리고 수정된 데이터를 다시 View에게 전달해서 화면을 업데이트
• 데이터를 수정할 필요 없이 그냥 View만 변경하면 될 경우에는 Controller가 Model에게 접근하지 않고 바로 View를 조작하는 것도 허용
• 데이터를 이용한 중간 처리 로직이 필요없을 경우 Model에서 Controller를 거치지 않고 바로 View에게 데이터의 변경을 알리는 것도 허용

MVC의 한계

 

MVC의 한계를 해결해보자!

 Flux 

단방향(Unidirectional data flow) 데이터 흐름

• Action : 어떤 변화를 일으키고 싶은지 설명하는 단순한 자바스크립트 객체
• Dispatcher : 액션을 받아서 스토어에 전달하는 역할
• Store : 데이터의 저장소 역할, Dispatch로 전달받은 Action에 따라서만 데이터를 변경, 그 외의 변경은 허용하지 않음
• View : 데이터를 UI로 표현하는 역할, Store를 구독하고 있다가 데이터가 변경되면 UI에 반영

 

요약

• 디자인패턴은 애플리케이션 설계 중 자주 반복되는 문제에 대한 모범답안
• 디자인패턴을 사용하면,
  • 이미 검증된 해결책을 사용할 수 있고
  • 패턴을 이용해서 효율적으로 소통할 수 있고
  • 패턴이 가지고 있는 좋은 설계로 인해 유지 보수가 용이함
• 디자인 패턴 중 MVC는 애플리케이션의 구성요소를 역할에 따라 Model, View, Controller로 나눈 구조
• MVC는 양방향 데이터 흐름을 가지고 있어 연쇄적인 데이터 변화가 발생할 수 있음
• 양방향 데이터 흐름으로 인해 애플리케이션의 동작을 예측하기 힘들어지자 이를 극복하고자 Flux 패턴이 탄생
• Flux의 핵심 개념은 단방향 데이터 흐름, 단방향 데이터 흐름으로 인해 애플리케이션의 변화를 예측하기 용이해짐
• Flux는 Action, Dispatcher, Store, View 4가지 구성요소로 이루어져 있음

 

Redux

Redux란?

• 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
• 단방향 데이터 흐름을 이용해 예측 가능하고, 일관적인 상태 컨테이너의 역할을 제공하는 라이브러리
• Flux 패턴에 영감을 받아서 Dan Abramov가 개발
• Flux는 하나의 패턴(개념), 이 Flux 패턴을 쉽게 적용할 수 있도록 자바스크립트로 구현한 구현체가 Redux
• React 또는 다른 View 라이브러리들과 함께 사용할 수 있음

Redux의 원칙

• 진실은 하나의 소스로부터(Single source of truth)
  • 애플리케이션의 모든 상태(state)는 하나의 저장소(Store) 안에 하나의 객체 트리 구조로 저장됨
  • 여러 개의 저장소를 관리하는 것이 아니라, 단 하나의 자바스크립트 객체로만 데이터를 저장
• 상태는 읽기 전용이다(State is read only)
  • 상태(state)는 읽기 전용, 즉 Store에 직접 접근해서 state를 수정할 수 없다.
  • state를 수정할 수 있는 유일한 방법은 Action 객체를 Dispatch를 통해서 전달하는 것
  • 상태를 업데이트하는 방식과 시점을 제한해서 예측 가능성을 증대
• 변화는 순수 함수로 작성되어야 한다(Changes are made with pure functions)
  • Redux State의 유일한 변경 방법
    • Action객체를 Dispatch를 통해서 Store에 전달하는 것
  • 전달된 Action을 통해서 State를 변경해야 함
    • 이때 모든 변화는 순수 함수로 작성되어야 한다.
  • 순수 함수
    • 사이드 이펙트가 없는 함수
    • 같은 Input에 대해 같은 Output을 보장할 수 있음
  • 순수 함수를 이용해서 상태의 변화를 예측 가능하게 할 수 있음
  • Redux에서 state의 변화를 책임지는 순수 함수를 Reducer라고 부름
    • 이전의 state와 action 객체를 Input으로 받아서 새로운 state를 return 하는 함수

 

Redux의 데이터 흐름

출처 : https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

 

Redux의 주요 개념

• View : 유저가 사용하는 화면, 버튼 등의 UI 요소
• Action & Action Creator
  • Action : 상태 변화에 대한 의도를 표현하는 단순한 자바스크립트 객체
    • type property는 필수적으로 가져야 함(의도를 표현하는 property)
    • 그 외의 property는 원하는대로 설정 가능
  • Action Creator : Action 객체를 만드는 함수
    • Action 객체를 매번 필요한 곳에서 손수 작성해도 되지만 Action Creator 함수를 이용할 경우 중복을 제거하고 Action을 만드는 과정에서 실수를 방지할 수 있는 이점이 있음
  • Dispatcher
    • Dispatch : 발송하다
    • Action 객체를 Reducer 함수에 전달하는 역할을 담당
    • Redux에서는 "store.dispatch()"의 형태로 제공
    • 동기적으로 처리되도록 작성되었기에 비동기 Action을 처리할 수는 없음
      • 비동기적인 처리가 필요한 경우 Middleware를 활용해야 함
  • Reducer
    • 이전 state와 Action 객체를 받아서 새로운 state를 리턴하는 순수 함수
    • Store가 하나이기에 Reducer도 하나로 만들어져야 함, 다만 모든 관심사가 한 함수에 합쳐지면 유지 보수가 어려움
    • 따라서 각각의 로직을 분리해서 SliceReducer를 만든 후 combineReducer 함수를 통해서 rootReducer를 만드는 방식을 사용
  • Store
    • Redux의 전체 state를 관리하는 하나의 객체
    • rootReducer로부터 createStore 함수를 이용해서 생성
  • Middleware
    • Action이 Dispatch를 통해서 Reducer에 전달되기 전 중간 처리를 담당하는 부분
    • 필수적인 부분은 아님, 필요시에만 활용
    • 비동기 API 호출, 로깅 등의 사이드 이펙트를 위해서 사용
    • 자주 사용되는 Redux의 미들웨어 라이브러리는 redux-thunk, redux-saga 등이 있음

 

요약

• Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
• Flux 패턴에 영감을 받아 만들어졌으며, 단방향 데이터 흐름을 따른다
• Redux의 데이터 흐름 : View에서 event 발생 ▶ Action 객체 생성 ▶ Dispatch로 Action 전달 ▶ (Middleware) ▶ Reducer ▶ Store의 State 변경 ▶ UI 반영