React Native Redux에 대해

 

Redux는 React Native에서 애플리케이션의 상태를 중앙에서 관리하는 패턴이자 라이브러리입니다.

특히 규모가 커질수록 여러 컴포넌트가 동일한 데이터를 공유할 때 유용하게 사용할 수 있습니다.

1. Redux의 기본 개념 Redux는 애플리케이션의 상태를 한 곳(스토어)에 모아두고, 필요한 컴포넌트가 이 상태를 쉽게 가져다 사용할 수 있게 해줍니다. 기본 원칙은 다음과 같습니다. 단일 스토어: 앱의 모든 상태를 하나의 스토어에 저장해 관리합니다. 불변성(Immutable): 상태는 직접 수정되지 않고, 새 객체로 복사해 변경합니다. 액션(Action): 상태를 변경하는 유일한 방법으로, 상태에 대한 설명을 담은 객체입니다. 리듀서(Reducer): 액션을 받아서 새로운 상태를 반환하는 함수입니다.  Redux의 동작 흐름 이해하기 컴포넌트가 특정 이벤트(예: 버튼 클릭)에서 상태를 변경하고자 하면, 액션을 생성합니다. 디스패치를 통해 이 액션을 스토어에 전달합니다. 스토어는 이 액션을 리듀서로 보내, 새로운 상태를 계산합니다. 리듀서는 기존 상태와 액션을 이용해 새로운 상태를 반환하고, 스토어가 업데이트된 상태를 다시 제공합니다. 상태가 변경되면 이를 구독 중인 컴포넌트들이 자동으로 다시 렌더링됩니다.

2. Redux의 주요 구성 요소 스토어(Store): 애플리케이션의 전체 상태를 담고 있는 객체입니다. 컴포넌트에서 이 상태를 사용할 수 있으며, 상태가 변경되면 구독 중인 컴포넌트가 다시 렌더링됩니다. 액션(Action): 상태 변경을 위한 "무엇을 할 것인가?"에 대한 설명을 담은 객체입니다. 예를 들어, 숫자를 증가시키는 액션은 { type: 'INCREMENT' }와 같은 형태로 작성됩니다. 리듀서(Reducer): 현재 상태와 액션을 받아서, 새로운 상태를 반환하는 함수입니다. 리듀서는 function(state, action) => newState 형태로 작성됩니다. 디스패치(Dispatch): 액션을 스토어에 전달하여 상태를 업데이트합니다. dispatch(action)을 통해 호출됩니다.

 

 

 

[ 예제 코드 ]

1. 액션 정의	2. 리듀서(Reducer) 정의
3. 스토어(Store) 설정	4. Provider로 앱에 Redux 연결 React Native 앱의 최상위 컴포넌트를 Provider로 감싸서 Redux 스토어를 연결합니다.

 

5. 컴포넌트에서 Redux상태와 액션 사용하기

 

주요 코드 설명

• useSelector: Redux 스토어의 상태를 읽어오는 Hook입니다. 여기서는 count 변수를 스토어에서 가져와 사용합니다.
• useDispatch: 액션을 스토어에 전달하기 위해 사용하는 Hook입니다. dispatch(increment()) 또는 dispatch(decrement())로 액션을 호출할 수 있습니다.
• Provider: App.js에서 Provider를 사용하여 스토어를 앱 전체에 제공합니다. 이를 통해 하위 컴포넌트에서 Redux의 상태와 액션을 사용할 수 있게 됩니다.