섹션 2. 서버 API와 연동하기
5강. Redux, Config, EncryptedStorage, AsyncStorage의 차이
앱을 껐다 켜도 저장되는 저장공간을 써야 함
npm install @react-native-async-storage/async-storageAsyncStorage는 암호화되지 않아서 누구나 값을 열어볼 수 있다.
그래서 보안에 민감하지 않은 데이터만 넣어 두어야 한다.
보안에 신경 써야 하는 값들(비밀번호, 개인정보 등)은 EncryptedStorage에 저장해야 한다.
npm i react-native-encrypted-storage라이브러리 설치
그래서 어디에 데이터를 저장할지 상황에 맞게 채택해야 한다.
- Redux : 앱이 꺼지면 날아감, 불러오기 등의 성능은 제일 좋음. 잠깐 쓰는 데이터 저장 공간에 적합. 렘과 같은 역할. 보안에 민감한 값을 임시로 넣기도 적합함.
- AsyncStorage : 보안에 취약함(암호화 X). 개발 환경마다 달라지지 않는 값
- EncryptedStorage : 보안에 민감한 값. 장기적으로 저장하는 경우.
- react-native-config : 보안에 취약함. 개발 환경마다 달라지는 값
6강. 리덕스 Redux
Redux란, 엄청 간단하게 쓰는 중앙 저장소라고 생각하면 된다.
여러 컴포넌트가 공유하는 상태를 관리하기 귀한 라이브러리이며, 메타가 설계한 flux 규격에 맞춰져 있다.
구조 : store → root reducer(state) → user slice, order slice
state 설계도 필요하다.
- state.user.email
- state.order
→ user, order가 비슷한 구분되는 단위 - state.ui
- → ui 담담 state
→ ui slice를 만들어서 전체 페이지에 대한 ui를 담당하게 만든다.
1) 스토어 Store
현재 애플리케이션의 상태를 저장하고, 상태를 읽고 변경하는 메소드를 제공한다. 리듀서를 사용하여 스토어의 상태를 변경하고, 컴포넌트 간의 상태 공유를 위한 중앙 저장소 역할도 수행한다. 상태 관리 라이브러리에서 중요한 개념이다.
2) 리듀서 Reducer
액션이 실제로 실행되면 state를 바꾸는 로직
Redux와 같은 상태 관리 라이브러리에서 사용되는 중요한 개념이다. 리듀서는 현재 상태(state)를 변경하기 위한 순수한 함수로, Action을 통해 상태를 변경하는 데 사용된다. JavaScript, TypeScript로 주로 구현되며, 현재 상태와 액션을 받아서 새로운 상태를 반환한다.
reducers: {
setUser(state, action) {
state.email = action.payload.email;
state.name = action.payload.name;
state.accessToken = action.payload.accessToken;
state.refreshToken = action.payload.refreshToken;
},
extraReducers: builder => {},extraReducer는 주로 비동기액션을 만들 때 사용한다.
그냥 Reducer는 동기 액션을 차지한다고 보면 된다.
3) 슬라이서 Slicer
Redux Toolkit과 같은 Redux 관련 도구나 라이브러리에서 사용하는 용어이다. 슬라이서는 Redux 스토어의 일부 상태와 해당 상태를 변경하는 리듀서를 번들로 정의하는 데 사용한다. 슬라이서를 사용하면 상태와 리듀서를 간결하게 정의하고 사용할 수 있어서 코드의 유지보수에 용이하다.
4) 액션 Action
state를 바꾸는 동작, 행위를 의미한다.
- SignIn.tsx 상에서의 Action
userSlice.actions.setUser({
name: response.data.data.name,
email: response.data.data.email,
accessToken: response.data.data.accessToken,
}),위의 코드가 Dispatch 되면
- user.ts 상에서 reducer가 실행
reducers: {
setUser(state, action) {
state.email = action.payload.email;
state.name = action.payload.name;
state.accessToken = action.payload.accessToken;
state.refreshToken = action.payload.refreshToken;
},
},
5) Dispatch
Action을 실제로 실행하는 함수
dispatch(
userSlice.actions.setUser({
name: response.data.data.name,
email: response.data.data.email,
accessToken: response.data.data.accessToken,
}),
);action이 dispatch 안에 들어와야 실행이 된다.
- 리덕스의 흐름을 파악하고
- 리덕스의 구조를 미리 설계
할 수 있으면 된다.
initialState : 현재 state
action.payload : 두개처럼 보이지만 한 덩이. 객체이다.
