리액티브 3

송은우·2022년 1월 29일
0

useEffect에서 Async를 못 씀. useCallback은 쓸 수 있음.
요청 보내기 직전에 setLoading(true);
요청 직후, 실패시 error 에도 loading false.
보통 finally에 넣음.
Ts에서 try에 나오는 error도 처리해야됨.
이때 에러 타입을 모르기에 TS에러가 생김.
(error as AxiosError)라는 것을 통해서 error에 접근할 때마다 계속 타입을 변경시켜주는 작업이 필요함.
그래서 보통 const errorResponse=(error as AxiosError).response로 처리하게 됨
단 error.response가 되는 경우가 네트워크 에러일 경우만 인데, 문법 에러같은 것이 생겼을 때는 catch가 불가능할 수 있음. 그래서 한 번 더 조절을 해줘야 하긴 함.

로딩중에는 회원가입 클릭을 못하도록 막아줘야 되기도 함. 이런 식으로 여러가지 고려를 해줘야됨.

Activity Indicator라는 컴포넌트가 리액트에 있음. 이거를 통해서 빙글빙글 돌아가도록 할 수 있음. 백, 프론트 둘다 서로 안전장치를 해줘야 됨.
axios.post(주소,값, 헤더) 이 3번째 헤더가 실제로는 많이 쓰임. 헤더를 이용해 고유한 값을 보내서 처리할 수 있음.

axios.post의 주소값이 불확실 한 경우가 있음. 개발 모드냐 배포모드냐에 따른 것들. 이런 것들을 분기 처리하기 위해서 react-native-config라는 것을 사용함. dotenv대신하는 것
localhost 안되면, 10.0.2.2하거나, 127.0.0.1하거나, 네이버에 내 아이피 검색해서 하는 방식으로 여러가지 것들로 시도해보기.

토큰 같은 것들은 저장할 공간이 필요한데, 리덕스,context API는 램같이 끄면 날아감.
import {AsyncStorage} from 'react-native';
라는 걸로 예전에는 했음
최근에는
npm i @react-native-async-storage/async-storage
라는 걸로 라이브러리로 처리해야함. 문제는 암호화가 안 되었기에 보안에 민감하지 않은, 데이터를 저장해야 함.
import EncryptedStorage from 'react-native-
encrypted-storage 라는 걸로 시작해서 저장하는 방식으로
await EncryptedStorage.setItem("키",값);
이렇게 처리가 가능함.

config(.env), asyncstorage, encryptedstorage, redux(램) 이런 것들이 있음.
보안에 민감한데 앱 끄면 날아가도 괜찮다면 리덕스도 괜찮음

개발환경별로 달라지는 값은 config, 계속 유지되는 것은 asyncstorage라는 느낌으로 가면 됨.
개발 환경별 차이는 API_URL 이 localhost나 10.0.0.2에서 시작하는 느낌임.

profile
학생의 마음가짐으로 최선을 다하자

0개의 댓글