React Native #2 Redux 후려치기

Explanation

오늘은 React Native로 가는 두번째 시간 Redux입니다. 전 특별한 이유 없이 처음부터 그냥 Redux만 사용해서 Flux나 MobX에 대해 잘 모르는데요, 최근에 글들을 보면 MobX도 많이 사용하는 것 같아 보여요. 관심 있으신 분들은 같이 알아보시면 좋을 것 같아요. 저도 기회가 되면 관련해서 글을 적어 보도록 하겠습니다.

역시 이번 글도 에제 소스를 만들어 봤습니다.
예제 소스는 https://github.com/falsy/react-redux-key-theorem에서 확인 하실 수 있습니다.

지난 글에서 사용한 예제와 거의 비슷한 예제인데요.
대신 부모 컴포넌트가 자식 컴포넌트에게 값을 전달해주지 않고 각각 필요로 하는 컴포넌트에서 Redux를 연결해여 전역의? 상태 변수를 가져오고 반영되도록 하였습니다.

조금 풀어서 이야기하면, 지난 글에서는 Person 에서 값이 변하면 변하는 값을 Arm 으로 전달하고 Arm 에서 Finger 로 전달해서 Finger 컴포넌트에서 수정된 값을 출력했는데요.
지금의 소스는 Person과 Finger 컴포넌트가 Redux로 연결되있고 Person 컴포넌트에서 값이 수정되면 Arm을 거치지 않고 Finger에서 수정된 값이 출력 된답니다.

1. Package

이전 글을 보니 제가 너무 Package부분을 이야기하지 않고 지나간 것 같아서 이번엔 짧게 적어보려 합니다.
이번 예제에서는 아래와 같은 라이브러리가 사용되었습니다.

굉장히 미흡하지만, 대충 이러합니다…

2. Redux

Redux는 크게 Action과 Reducer와 Store가 중요한거 같아요.
아주아주 간단하게 이야기하자면, Action에서 나는 ‘공의 색을 바꿀꺼야.’ ‘빨간색’으로 라고 지시하는? 거고 Reducer는 실질적으로 ‘공의 색을 바꿀꺼야.’ 라고 요청을 받았을때 직접 공의 색을 ‘빨간색’으로 바꾸는 일을합니다. 그리고 그런 Reducer들은 Store에 모여있고요 Store는 Action의 요청을 받고 Reducer로 수정된 것을 dispatch()를 통해 반영해 준답니다.

절대 위 설명이 온전히 바른 설명은 아닙니다. 그냥 그렇게 대충 가볍게만 읽어주세요.

3. Code

이제 코드를 보며 가볍게 알아봅시다.

이렇게 하여 대충 redux를 사용할 준비가 끝났습니다. 다음으로 action과 reduce를 만들어 볼까요

action과 reducer를 마치고, 이제 직접 컴포넌트에서 사용해봅니다.

5. 마치며

뒤 늦게 생각해보니 Redux에서는 미들웨어에 대해서도 알아야 하는데, 깜박 했네요. 저는 주로 미들웨어로 ‘redux-thunk’ 하나를 사용하는데요. 글로 적진 않았지만, Redux 미들웨어도 함께 알아두시면 좋을 거 같습니다~

이전 글과 마찬가지로 아래의 두 블로그가 Redux에 대해서도 참고하기 좋은 곳 인거 같아요~
https://velopert.com/reactjs-tutorials
https://www.zerocho.com/category/React

글에는 잘못 설명된 부분이 많이 있을 수 있습니다. 가볍게 읽어주시고 잘못된 부분은 알려주세요~

Leave a Reply