리액트 네이티브 4

config가 제대로 적용 되었는지 아닌지를 보려면
Android studio에서 로딩이 오래걸리는 이유는.
젯브레임스 계열 에디터들이 처음 볼때마다 모든 소스코드를 다 메모리에 올리기에 자동완성이 좋지만 로딩이 오래걸리고, 메모리를 많이 먹는다.

reducer: 동기 액션
extra reducer: 비동기 액션
store => root reducer=>user slice,order slice
state.user
state.order로 접근

보통state.ui도 만들어서 loading여부도 확인해줌.

구조 설계가 가장 중요함.

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

const initialState = {
  name: '',
  email: '',
  accessToken: '',
  money: 0,
};
const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setUser(state, action) {
      state.email = action.payload.email;
      state.name = action.payload.name;
      state.accessToken = action.payload.accessToken;
    },
    setAccessToken(state, action) {
      state.accessToken = action.payload;
    },
    setMoney(state, action) {
      state.money = action.payload;
    },
  },
  extraReducers: builder => {},
});

export default userSlice;

에서 reducers:{
setUser(state,action)부분은 리듀서이다.
}
실제로 액션은
dispatch(userSlice.actions.setUser({부분이 된다.}))
action:state를 바꾸는 액션. dispatch: 액션을 실제로 실행하는 함수
reducer: 액션이 실제로 실행되면 state를 바꾸는 로직.
action.payload는 setUser(요 부분이 된다는 것 정도)

실제로는 dispatch=useDispatch()라는 걸로 하는 것이 공식적이긴 한데, TS에서는
export const useAppDispatch=()=>useDispatch<AppDispatch/>() 라는 걸로 처리를 해서 dispatch=useDispatch()대신 useAppDispatch 이거를 redux tool kit 쓰는 사람들이 이렇게 씀.
wrapping함. 단순히 TS를 해결하기 위해서 쓰는 것임.

redux-toolkit-query는 써볼만도 하기는 함.
refresh token이 있는 것은 acesstoken 탈취시 처리가 안 되기에 유효기간을 만들어 둠. refresh token 로그인 다시 하는 과정을 스킵시켜줌.
refresh token은 EncryptedStorage에 잘 넣어둬야 됨. 털리면 답이 없기에.
access token이 탈취 가능하기에 2차 인증. 카드 비번 입력 같은 것들. access token과 refresh tooken은 따로 보관해야 한다.
access 10~1시간
refresh 1~30일 정도로 좀 자유로움.
refresh token이 털렸을 때 서버에 token이나 refresh token같은 것들에서 db화 해두기에 없애버릴 수 있음.

EncryptedStorage 대신 AsyncStorage로 쓸 수도 있긴 함
redux persist나 local storage로 페이지 새로고침에 담아둘 수 있긴 함. react같은 경우는 새로고침을 할 것으로 전혀 생각하지 않았음. 서버쪽에서 저장하기는 서버 부화가 생김
웹소켓, 푸쉬알림으로 실시간 정보
웹소켓은 배터리 소모가 크고, 서버쪽 부담도 있기에 푸쉬 알림으로 하는 것이 좋긴 함.

리액트에는 커흐텀 훅에 익숙해 져야됨.