오티스의개발일기

[REDUX] 에대해서 본문

개발/react-native

[REDUX] 에대해서

안되면 될때까지.. 2022. 12. 18. 19:27
728x90

다음글 >

2022.12.19 - [개발/react-native] - [REACT NATIVE] REDUX 적용하기 + 폴더 구조 + 깃허브 참조

 

[REACT NATIVE] REDUX 적용하기 + 폴더 구조 + 깃허브 참조

다음글 > 2022.12.20 - [개발/react-native] - [REACT NATIVE] REDUX 미들웨어 그리고 클라이언트단부터의 로직의 흐름 < 이전글 2022.12.18 - [개발/react-native] - [REDUX] 에대해서 오늘은 리엑트 네이티브에 리덕스를

otis.tistory.com

 

< 이전글

 

2022.12.18 - [개발/react-native] - [REACT NATIVE] 프로젝트 시작하기

 

[REACT NATIVE] 프로젝트 시작하기

다음글 > 2022.12.18 - [개발/react-native] - [REDUX] 에대해서 [REDUX] 에대해서 다음글 > 2022.12.19 - [개발/react-native] - [REACT NATIVE] REDUX 적용하기 + 폴더 구조 + 깃허브 참조 < 이전글 2022.12.18 - [개발/react-native]

otis.tistory.com

글을 시작하기에 앞서

본인은 vue.js를 사용해 왔고

vue.js 같은경우는 component 마다 data라는것으로 변수를 선언하고

컴포넌트 간의 데이터와 함수는 react와 비슷한 형식으로 데이터를 통신한다.

 

오늘 작성할 redux는 vue.js에서 EventBus 같은 느낌을 주었다.

$EventBus 는 직접 데이터 통신 이아닌 무선으로 데이터를 통신하는 것으로

redux와 비슷한것같다.

 

위글을 쓰는 이유는 vue.js 를 사용해 봤던 사람의 이해를 도와주기위해 쓴것으로 

정확하지 않으니 양해부탁 바란다.

 

 

일단 redux 에는 stroe라는것이 있고 이것들은 은행으로 비유하여 설명해보겠다.

store = [ (계좌)

            state, [나의 계좌 정보]

            reducer [계좌 변경 신청서]  : [
            			dispatch,  [출금 혹은 입금]
                                subscribe, [계좌 금액 실시간 확인 신청]
                                getState, [계좌 금액확인]
            ]
                                       

]


render = [본인]

 

일단 우리가 은행에서 계좌를 계설을 할때

요즘은 모바일로 할수있지만

옛날처럼 창구에 직접가서 계좌를 계설한다고 가정해보자.

 

은행에 계좌를 개설하고 

계좌를 통해 할수있는것을 생각해보자

 

0. 계좌 개설 store

1. 계좌 금액 확인 혹은 통장정리 getstate

2. 계좌금액 실시간 확인 문자 subscribe

3. 출금, 입금 dispatch

 

 

0. 계좌 개설 store

일단 계좌를 개설한다.

계좌를 개설할때 은행 창구직원이 필요하다,

하지만 실질적으로 창구직원이 직접 종이를 만들고 계좌를 만들어주지는 않는다.

창구직원도 마찬가지로 계좌 발급 신청서를 작성하고 그것을 입력하거나 계좌를 발급해주는 부서에 가져다주면

통장이 발급이된다 

 

이것과 같이

우리가 처음 store[계좌]를 만들때

신청서가 필요하다. 그것을 reducer라고 생각하면 좀더 이해하기가 쉽다.

fuction reducer (oldState, action) {  // 계좌 발급 신청서

}

var store = Redux.createStore(reducer);  // 나의 은행 계좌

 

 

계좌가 발급된후 기능에대해 말해보겠다.

 

 

0. 계좌 개설 store

1. 계좌 금액 확인 혹은 통장정리 getstate

2. 계좌금액 실시간 확인 문자 subscribe

3. 출금, 입금 dispatch

 

1. 계좌 금액 확인 혹은 통장정리  getState

 

계좌가 발급된후 몇일후 나의 통장에 얼마가있는지 확인하러 은행에 간다고 가정해보자

요즘은 당연히 공인인증으로 발급이 가능하지만 옛날처럼 창구에 간다고 생각해보자.

 

getState는 창구직원이라고 보면된다.

이전에 말한 reducer는 신청서이지 창구직원이아니다 착각하면 안된다.

 

우리가 은행에가면 대출상담 입출금 등... 각 업무마다 지정된 창구 직원이 존재한다.

그것과도 같은것이다 우리는 통장확인 이라는 업무가 지정된 창구를 사용할것이고

그것이 getState라 보면된다.

 

또한 render는 나 자신이다. 

나말고 다른사람이 나의 통장을 확인하면 되겠는가?

그렇기에 redner는 자신이라 생각하면된다.

 

fuction reducer (oldState, action) {  // 계좌 발급 신청서

}

var store = Redux.createStore(reducer);  // 나의 은행 계좌

function redner () { // 나 자신
	var state = store.getState(); // state = 나의 계좌정보 , store.getState() // 은행에 있는 통장확인 창구직원
    // 해석 = 내가 은행에가서 통장확인 창구에가 나의 통장정보를 얻어온다 그 통장정보는 state
}

 

 

0. 계좌 개설 store

1. 계좌 금액 확인 혹은 통장정리 getstate

2. 계좌금액 실시간 확인 문자 subscribe

3. 출금, 입금 dispatch

 

2. 계좌 금액 확인 혹은 통장정리  subscribe

요즘은 카카오톡 혹은 어플리케이션에서 실시간으로 계좌정보를 확인할수있다.

하지만 예전에는 통장을 계설할때 문자신청을 하여 실시간 계좌정보를 문자로 받았었다

현재도 이기능이 있다.

 

이것과 같이 

언제 신청하는지는 중요하지않지만

계좌를 신청하고 신청후에 실시간 문자 신청을 하는것이라 보면된다.

 

fuction reducer (oldState, action) {  // 계좌 발급 신청서

}

var store = Redux.createStore(reducer);  // 나의 은행 계좌

function redner () { // 나 자신
	var state = store.getState(); // state = 나의 계좌정보 , store.getState() // 은행에 있는 통장확인 창구직원
    // 해석 = 내가 은행에가서 통장확인 창구에가 나의 통장정보를 얻어온다 그 통장정보는 state
}


store.subscribe(render); // store = 나의 계좌, subscribe = 실시간 문자기능, redner = 나자신
// 해설 내가 만든 계좌에 내가 실시간 문자기능을 신청하겠다.

 

 

0. 계좌 개설 store

1. 계좌 금액 확인 혹은 통장정리 getstate

2. 계좌금액 실시간 확인 문자 subscribe

3. 출금, 입금 dispatch

 

 

3. 출금, 입금 dispatch

은행에 들어가 창구에가 입금을 신청한다고 가정해보자

 

1.신청서(reducer)를 먼저 작성한다.

2. 신청서(reducer)에 출금인지 입금인지 체크한다.

3. 얼마나 돈을 출금 혹은 입금할지 적는다.

4.입출금 창구직원 (dispatch) 에게 간다

5. 창구직원(dispatch) 은 신청서(reducer) 를 받고 업무처리를 한다.

6. 계좌(state)에 변동사항이 생겼으니 고객의 실시간 문자(subscribe)의 신청여부를 확인한다.

7. 실시간 문자(subscribe)신청이 되어있다면 실시간 문자(subscribe)는 나 자신(render)에게 계좌확인 (getState) 을하라고 지시한다.

8. 새로 받은 계좌정보(state) 를 나자신(render) 에게 다시 전달한다.

9. 사용자는 실시간으로 새로 바뀐 자신의 계좌정보를 확인할수있다.

<body>
	<form onsubmit="store.dispatch({type: 'deposit', data: {'money': 1000, 'to': '홍길동'}})"> // 입금 신청
    <form onsubmit="store.dispatch({type: 'withdraw', data: {'money': 2000}})"> // 출금 신청
</body>



fuction reducer (oldState, action) {  // 계좌 발급 신청서
	if (action.type === 'deposit') { // 방금 들어온 신청서 타입이 입금신청이라면
    	var newContents = oldState.contents.concat();
        var newMaxId = oldState.maxId + 1;
        newContents.push({id:newMaxId, money: action.data.money}) // 입금 실행
        return Object.assign({}, state, { // 계좌 정보가 변경됨 변경되고 dispatch가 subscribe에 변동사항을 보낸다.
        	contents:newContents,
            maxId:newMaxId,
            mode:'read',
            selectedId:newMaxId
        });
        // 해석 = dispatch(창구직원) 가 reducer (신청서) 를 통해 입금혹은 출금 신청을 하고 신청이 정상적으로 이루어지면
        // subscribe(실시간 문자 기능) 로 변경되었다는 상태를 보내고 subscribe(실시간 문자 기능)는 
        //redner(나 자신)를 호출 redner(나 자신) 는 getState(계좌 확인신청)를 호출후 변경사항을 (redner)사용자에게 다시 보내준다.
    }
    if (action.type === 'withdraw') { // 방금 들어온 신청서 타입이 출금신청이라면
    ...
    }
    
}

var store = Redux.createStore(reducer);  // 나의 은행 계좌

function redner () { // 나 자신
	var state = store.getState(); // state = 나의 계좌정보 , store.getState() // 은행에 있는 통장확인 창구직원
    // 해석 = 내가 은행에가서 통장확인 창구에가 나의 통장정보를 얻어온다 그 통장정보는 state   
}


store.subscribe(render); // store = 나의 계좌, subscribe = 실시간 문자기능, redner = 나자신
// 해설 내가 만든 계좌에 내가 실시간 문자기능을 신청하겠다.

 

 

이렇게 redux에 대한 전체적인 흐름이 끝이났다.

다음글에서는 어떻게 react native 에서 사용할지 포스팅 해보겠다.

728x90

'개발 > react-native' 카테고리의 다른 글

[REACT NATIVE] Redux-Saga 프로젝트 시작하기 -git첨부-  (0) 2022.12.21
[REACT NATIVE] IMMER 사용하기 + REDUX 추가설명 -git첨부-  (0) 2022.12.20
[REACT NATIVE] REDUX 미들웨어 그리고 클라이언트단부터의 로직의 흐름  (0) 2022.12.20
[REACT NATIVE] REDUX 적용하기 + 폴더 구조 -git첨부-  (0) 2022.12.19
[REACT NATIVE] 프로젝트 시작하기  (2) 2022.12.18
'개발/react-native' Related Articles more
Comments