[React Native] Redux

 

 

 

---

 

---

 

 

---

1. Redux란

Redux - 애플리케이션 상태(state)를 용이하게 관리하기 위한 프레임워크(오픈소스 JavaScript 라이브러리)

react나 react native에서 제공해주는 내부 기술이 아니라 html, angular JS, jQuery 등 과도 사용할 수 있지만 컴포넌트를 많이 다뤄야 하는 React Native와 상호성이 가장 좋다. 또한 시너지 효과를 낼 수 있어 React, React Native 개발자들은 Redux와 함께 개발하고 있다.

 

state의 까다로운 관리, state 접근, 프로젝트 규모에 따른 컴포넌트 구조의 복잡성 등의 문제가 있는 걸 basic 강의에서 이미 많이 느꼈을 ㅓ것이다. 이럴 때 모든 컴포넌트들이 state를 쉽게 공유하고 관리도 쉽게 만들어주고 상태 관리 라이브러리가 바로 redux이다.

---

2. Redux의 데이터 흐름

고객 A가 ATM을 통해 돈을 인출하다고 하자!

그럼 고객 A는 ATM에 input(인출 버튼 터치, 금액 입력)을 넣을 것이다. 그럼 ATM에도 여러 task를 수행하는 함수가 있을텐데 그 중 돈 인출하기 함수가 실행될 것이다. 이 함수는 은행 Server에 돈을 인출하라는 명령을 전달할 것이다. 이 명령에서 중요 키워드는 고객 A의 계좌, 인출, 10만원이 될 것이다.

이제 은행 서버로 가자. 

은행 서버에는 인출과 관련된 함수가 존재할 것이고 고객 A의 통장 잔고 데이터가 있을 것이다. 은행 서버에서는 인출 함수를 통해 고객 A의 통장 잔고를 업데이트하고 이 데이터를 ATM에 다시 보내줄 것이다. ATM은 은행서버에서 받은 데이터를 기반으로 output(현금, 명세표)을 고객 A에게 전달할 것이다.

 

그럼 이 상황을 react native와 redux 세계관에 매칭 시켜보자

 

React Native 세계관

고객 A -> User

ATM -> APP

input(인출 버튼 터치, 금액 입력) -> input(버튼 터치 등 Event 발생)

 

Redux 세계관

ATM 내 돈 인출하기 함수 -> Action Creator(user에 의해 input 발생 시 action 반환)

함수가 은행 서버에 명령 전달 -> dispatch(action) 함수

(인출, 금액) -> action 객체 형태

은행 서버 -> store

은행 서버 내 함수 -> Reducer (state 변화를 일으키는 함수들)

고객 A 통장 잔고 -> state

은행서버에서 ATM으로 전달 -> connect(업데이트된 state를 react native로 연결해주는 다리, mapStateToProps, mapDispatchToProps 함수 존재)

 

React Native, Redux 세계관은 독립적이다. state를 관리하는 redux store에는 react native 컴포넌트들이 접근이 불가능하다. 따라서 분리된 두 세계관을 이어주는 connect가 존재한다. 방향은 store에서 react native 쪽으로 나가는 일방통행! store->react native

 

react native가 새로운 state 값을 받아오면 화면은 새롭게 렌더링되고 유저는 새로운 화면을 접하게 될 것이다.

전체 구조를 봤다면 각 요소를 하나하나 보도록 하자

---

3. action과 action creator

1) action

action - 상태를 변경(state update)하기 위해 발생

객체 형식

{
	type: "EXAMPLE_TYPE"
}

타입은 필수! 액션 종류를 한 번에 식별할 수 있는 문자열이어야 한다.

실제 앱 개발 시에는 type 별도 파일로 관리한다.

일반적으로 대문자로 쓴다.

액션에 필요한 임의의 데이터를 담는 필드를 만들 수 있다.

 

// 예시
{
	type: "WITHDRAW_MONEY"
	payload: "100,000"
}

 

2) action creator

action creator - action을 생성하는 함수, action을 반환하는 함수

action은 단지 객체라 자체만으로는 state에 어떤 변화도 일으킬 수 없다. 그래서 action을 생성할 method가 필요한데 이게 action creator 가 존재하는 이유이다.

 

// action creator start
const withdrawMoney = (param) => {
	/*
    code & alg.
    */
    
    // action start
    return {
    type: WITHDRAW_MONEY,
    payload: amound
    }
    // action end
}
// action creator end

ATM 예시를 보면 송금하다, 입금하다, 인출하다 등이 action creator이고 인출하다라는 action creator에서는 type 값이 WITHDRAW_MONEY인 action을 리턴하게 되는 것이다.

---

4. dispatch

dispatch - store의 내장 함수 중 하나

 

redux 사용 이유 - state의 효율적 관리

state 값을 update 시키는 함수를 reducer라고 하는데 이 reducer에게 어떤 action이 발생했는지 알려야 한다. 이 역할을 하는 것이 dispatch

dispatch는 action을 인자로 받아 dispatch(action) 꼴이 가능하며 이는 dispatch(ActionCreator(param))과 같은 의미로 볼 수 있다.

 

dispatch 함수를 호출하면 store가 reducer를 실행하고 reducer에서 state update가 이뤄진다.

 

---

5. store와 state

store - 하나의 App에 단 하나의 Store만 존재, state, Reducer 및 기타 내장 함수 존재

state - 데이터 및 UI 상태 등 어플리케이션을 유지하기 위한 정보

state의 변경 <-> View의 변경

 

redux를 사용하면 state를 한 곳에서 관리할 수 있게 되는데 이 한 곳이 store가 된다.

---

6. reducer

reducer - state에 변화를 일으키는 함수 

action으로 정의된 이벤트를 직접 수행

 

state, action을 input으로 받아와 state' 를 output으로 반환한다.

 

// reducer start
export sampleReducer (state=initialState, action) {
	switch (action, type) {
    	case WITHDRAW_MONEY:
            // state' start
            return {
            ...state,
            account: payloud
            }
            // state' end
		default:
        	return state
    }
}
// reducer end

reducer는 전달된 type 값에 따라 분기된 로직을 수행하기 때문에 action에서 type이 필수이다.

reducer는 순수함수(pure function)여야만 한다.

함수 안에서는 다른 알고리즘이나 프로세스가 개입되어서는 안 된다.

네트워크 요청과 같은 순수하지 않은 작업 처리는 불가능한데 실제로는 reducer 안에서 이런 작업을 처리해야할 경우가 존재하기도 한다. 이럴 때는 다른 미들웨어를 통해 작업을 처리한다.

---

7. connect

connect - react native 세계관과 redux 세계관의 연결 함수

react native, redux 세계관은 독립적이다. 즉, react native 컴포넌트가 redux의 흐름에 타는 것이 불가능하다.

흐름에 타기 위해서는 connect라는 함수를 이용해야 하고 독립적으로 존재하는 두 세계관을 이어준다.

 

그럼 connect 함수만 있으면 새로 업데이트된 store 안의 state 값을 컴포넌트가 받을 수 있을까?

No!

컴포넌트가 state로부터 어떤 데이터를 받는 경우 그 형태는 props 가 되어야 한다. props 는 불변으로 바뀌지 않는다. 따라서 state가 변경될 때마다 새로운 컴포넌트가 생성된다.

 

store 내 state -> connect -> component 내 props

state 변경 -> 새로운 component 생성

 

store가 가진 state를 어떻게 props에 엮을지에 대한 해답 - mapStateToProps

reducer에 action을 알리는 함수 dispatch를 어떻게 props에 엮을지에 대한 해답 - mapDispatchToProps

-> connect(mapStateToProps, mapDispatchToProps)(component)

---

8. Redux 사용 목적

Redux의 3원칙

1. Single Source of Truth (신뢰 가능한 유일한 정보원)

 - 어플리케이션의 모든 state는 단일 store에서 관리

2. State in Read-Only (state는 읽기 전용)

 - state의 변경은 반드시 action을 통해서

3. Changes are Made with Pure Functions (변경은 순수함수를 통해서만)

 - Reducer는 순수함수로 정의

순수함수 - 인수 변경 X, API 호출 X, 네트워크 요청 X, 순수함수가 아닌 함수(e.g. Date.now(), Math.random())의 호출 X

=> state 관리가 용이

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%A4%91%EA%B8%89/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate - 인프런 | 강의