[RN] 상태관리 라이브러리 Redux란 ?

Redux(리덕스)란?

Redux는 Javascript 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 상태를 관리할 수 있다. 예를 들어 회원가입 시 사용자가 입력한 정보를 가지고 다른 화면으로 이동해야 한다고 가정했을 때 이를 props로 넘기는 것은 매우 비효율적이다. 따라서 상태 관리 라이브러리인 Redux를 사용하여 쉽게 상태 값을 전달하거나 업데이트 할 수 있다는 것이다. 즉 전역 상태를 관리할 때 굉장히 효과적이다.

 

 

Redux의 특징

1. Single source of truth

• Redux는 한 곳에서 데이터를 전역적으로 관리하고, 관리하는 이곳을 store라고 부른다.
• 즉, 하나뿐인 데이터 공간이 있다.

2. State is read-only

• 기존의 값을 변경하고 싶을 때는 새로운 State를 생성하여 업데이트 해줘야 한다.
• 기존의 상태를 건드리지 못함.
• 즉, 불변성을 유지하며 상태를 변경해줘야 한다.

3. Changes are made with pure functions

• 변경은 순수 함수로만 가능하다.
• 즉, 동일한 입력값이 있다면 동일한 출력값이 있어야 한다.

 

Redux의 사용 방법

React-Native에서 redux를 조금 더 쉽게 사용하기 위해 @reduxjs/toolkit 라이브러리를 사용하고자 한다.

먼저, 터미널을 통해 설치부터 해주자!

npm install @reduxjs/toolkit react-redux

 

 

그 후, APP/index.tsx 파일에 들어가서 기본 설정을 해준다.

import { Provider } from 'react-redux';
import store from 'store 경로';

const AppWrapper = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
};

 

Store 내에 파일은 아래와 같이 구성한다.

import { configureStore, createSlice } from '@reduxjs/toolkit';

const initialState = {
	data:{
    	name:"",
        age:0,
        gender:"F",
	}
}

const testStore = createSlice({
  name: 'testStore'
  initialState,
  reducers: {
  	setData: (state, action) => {
    	state.data = action.payload;
    },
  }
})

export const store = configureStore({
  reducer: {
    test: testStore.reducers,
  },
});

• configureStore : 내가 저장하고 싶은 저장소를 넣는다. 기본 설정이라고 생각하면 됨 !
• createSlice : store의 이름, 초기값, 처리하고자 하는 메서드를 넣어준다 ! 
  • name : store의 이름
  • initialState : 초기값 설정
  • reducers : 처리하고자 하는 메서드!  여러 함수를 넣어도 된다! state는 현재의 상태, action은 받아온 데이터를 의미한다.

 

State에 접근하기

state에 접근하기 위해서는 useSelector, useDispatch를 사용한다.

• useSelector : redux의 state 값을 조회할 수 있다.
• useDispatch : 생성한 action을 useDispatch를 통해 발생시킬 수 있다. 즉, reducer에 작성한 함수를 사용하여 state 값을 업데이트할 수 있다는 것!

import { useSelector, useDispatch  } from 'react-redux'
import { setData } from '../store'

// useSelector를 사용하여 state값을 조회할 수 있음, userData에 저장됨
const userData = useSelector(state => state.data);

const Login = () => {
  ...
  const dispatch = useDispatch();
  
  // setData 함수를 통해 user의 데이터값을 업데이트 할 수 있음
  dispatch(setData(user));
  ...
}