[ReactJS] React 이론 공부 기초 - 7

 

Redux

• 앱 전체 상태를 쉽게 관리하기 위한 라이브러리
• Redux의 많은 개념들이 Flux pattern에서 차용됨
• 주로 React 앱과 같이 사용함
• Redux를 언제 써야하나?
  • 앱 전체의 상태 관리가 필요할 때
  • 복잡한 비동기 처리가 있는 상태 관리가 필요할 때
  • 앱의 상태가 복잡하고, 이를 체계적으로 관리하고 싶을 때
  • 상태 관리 패턴을 도입하여, 여러 개발자와 협업하고 싶을 때
  • logger, devtool 등을 활용하여 상태를 관리할 필요하 있을 때
• Redux의 핵심 원칙
  • Single source of truth : Store는 단 하나이고, 모든 앱의 상태는 이곳에 보관됨
  • Immutability : 상태는 오로지 읽을 수만 있고, 변경하려면 모든 상태가 변경되어야 함
  • Pure function : 상태의 변경은 어떠한 사이드 이펙트도 만들지 않아야 함
• Action 
  • 상태의 변경을 나타내는 개념
  • 어떤 형태든지 상관 없으나, 주로 type, payload를 포함하는 자바스크립트 객체
• Action creator
  • action을 생성하는 함수
  • 직접 Action을 생성하는 것보다 action creator를 활용하면 재사용성이 좋고, 하나의 레이어를 추가할 수 있음
• Store
  • 앱 전체의 상태를 보관하는 곳
  • Action에 따라 reducer에서는 새로운 상태를 만들어내며, store는 그 상태를 저장함
  • Store의 상태는 불변하며, 매 액션이 발생할때마다 새로운 객체가 만들어짐
• Reducer
  • Action을 받아 새로운 state를 만듦
  • (state, action) => action의 인터페이스를 따름
  • 상태 변경 시 사이드 이펙트가 없어야 함
• Dispatch
  • Action을 redux로 보내는 함수
  • Dispatch 후에 action은 middleware를 거쳐 reducer에 도달함
• Selector 
  • 특정 state 조각을 store로부터 가져오는 함수
  • store의 state는 raw data를 저장하고, 계산된 값 등을 selector로 가져오는 등의 패턴을 구사할 때 유용함

Redux의 구조

출처 : 엘리스 강의 자료

• middleware
  • action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달함
  • redux-thunk, redux-logger 등의 라이브러리를 적용
• enhancer
  • action은 dispatch 이후 모든 middleware를 먼저 통과한 후에 reducer에 도달
  • redux devtools 등의 라이브러리를 적용

redux-toolkit

• redux에서 공식적으로 추천하는, helper 라이브러리
• 기존에 만들어야 하는 수많은 보일러 플레이트를 제거하고, 유용한 라이브러리를 포함하여 redux 코드를 쉽게 작성하게 함
• redux-devtools, immerjs, redux-thunk, reselect 등의 라이브러리가 미리 포함됨
• configStore
  • redux의 createStore 함수를 래핑함
  • named parameter로 쉽게 store를 생성함
  • reducer -> 객체를 받아 combineReducers를 적용함
• createAction
  • Action creator를 함수를 만드는 함수
  • 만들어진 action creator에 데이터를 넘기면, payload 필드로 들어감
  • 생성된 action creator는 toString() 메서드를 오버라이드해, 자신이 생성하는 액션의 타입 string을 리턴함
• createReducer
  • reducer를 만드는 함수
  • builder의 addCase 메서드를 이용하여, action마다 state의 변경을 정의함
  • immerjs를 내부적으로 사용하므로, mutable code를 이용해 간편하게 변경 코드를 작성함
• createSlice
  • Slice는 action creator, reducer등 별도로 만들어야하는 여러 Redux 구현체를 하나의 객체로 모은 것
  • createSlice 함수를 이용하여 많은 보일러 플레이트를 없애고 쉽게 action creator, reducer를 만듦
• createSelector
  • state를 이용한 특정 데이터를 리턴하도록 함
  • 내부적으로 데이터를 캐시하며, 데이터가 변동이 없다면 캐시된 데이터를 리턴함

react-redux

• redux를 react 앱에 연결하게 하는 라이브러리
• redux에서 관리하는 상태, dispatch 함수 등을 가져올 수 있음
• 클래스 컴포넌트, 함수형 컴포넌트에 모두 연결할 수 있음
• provider
  • redux store를 react와 연결하기 위해서는 반드시 Provider로 컴포넌트를 감싸야 함
  • Provider 안에서 랜더링 된 컴포넌트들은 state 접근할 수 있음
• useDispatch
  • redux의 dispatch 함수를 가져오기 위한 API
  • dispatch로 action creator가 생성한 action을 보내면 redux 내부로 보내지게 됨
• useSelector
  • Redux store로부터 데이터를 얻기 위한 API
  • selector function을 인자로 넘김
  • selector function은 데이터에 어떤 변경을 가하면 안됨
  • 데이터를 특정 형태로 계산하여 읽을 수 있음

Redux를 이용한 비동기 처리

• redux 비동기 처리를 위해서는 비동기를 위한 middleware를 추가하여야 함
• redux-thunk는 promise를 이용한 비동기 action을 쉽게 처리하도록 하는 middleware
• createAsyncThunk
  • redux-toolkit에서는 thunk middleware를 디폴트로 추가함
  • redux-toolkit은 createAsyncThunk API를 제공함
  • fullfilled, rejected, pending, 3가지 상태에 대해 각각 reducer를 작성
  • Typescript 환경에서 reducer 작성 시, builder callback을 사용하여 작성해야 정확한 타이핑이 가능함
  • createAsyncThunk로 만들어진 action creator는 4가지 함수로 구성됨
    • addPost : async 함수를 dispatch하는 함수
    • addPost.Pending : promise를 생성했을 때 발생하는 액션
    • appPost.fullfiled : promise가 fulfiled 되었을 때 발생하는 액션
    • addPost.rejected : promise가 rejected 되었을 때 발생하는 액션
• 연속적인 비동기 처리
  • thunk 함수를 dispatch하면 promise가 리턴됨
  • 따라서 .then() 메서드로 연속적인 비동기 처리를 이어 실행함
• 동시 비동기 처리
  • promise.all을 이용해, 여러 비동기 처리를 동시에 실행함
  • 주의할 점은, thunk의 promise가 rejected 되어도 .then()으로 들어옴
•  

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript