TIL-50 React Native AsyncStorage

PRB·2021년 11월 9일
0

React

목록 보기
14/22
post-thumbnail

리액트 네이티브로 프로젝트를 진행하다기
로그인할 때 웹은 로컬이나 세션 스토리지에 담았다.
ios는 asyncstorage에 저장하면 된다고 한다.
설치하는 방법은

npm i @react-native-community/async-storage
import AsyncStorage from '@react-native-community/async-storage';
AsyncStorage.setItem('token','token') // 저장하기
});

AsyncStorage.getItem('token','token') // 불러오기 

여기까지는 잘 진행해왔는데 서버와 통신할 때 token 값을 보내야 하는데
헤더에 계속 Undefined가 뜨는 것이다.
그래서 계속하다가 찾아낸 정보가 AsyncStorage가 비동기라는 것이다.

function HomeScreen({ navigation, route }) {
  const [list, setList] = useState([]);
  const clearAll = async () => {
    await AsyncStorage.getItem('token');
  };
  useEffect(async () => {
    fetch('https://the-rich-coding-test1.herokuapp.com/diaries', {
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
        Authorization: await AsyncStorage.getItem('token'),
      },
    })
      .then((res) => res.json())
      .then((data) => {
        data.status === 500 ? setList([]) : setList(data);
      });
  }, [list]);

그래서 처음 async와 await를 사용해 봤는데 잘 작동했다.
근데 아직 삭제가 안된다 😭😭
더 구글링 하러 가봐야겠다.

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글