[React Native] useEffect with Axios

React hooks를 잘 사용하는 것이 React / React Native 코드를 짤 때 핵심이다. 그 중에서도 useEffect는 화면마다 필요한 데이터를 계속 업데이트할 때 정말 유용한 hook이다. (Class component 형식의 componentDidMount의 기능과 유사하다고 볼 수 있다.)

오늘은 useEffect와 axios를 함께 사용할 때 유용한 방법 몇 가지를 기록하겠다.

useEffect 호출

import React, {useEffect} from 'react';

useEffect 내에 Axios 호출

나는 asyncstorage를 사용하기 귀찮아서 navigation method에서 route params를 이용해 props를 주고받았다.
아래 코드는, 받은 route params를 axios의 params로 활용하는 코드의 일부다.
이때 useEffect를 제대로 사용하지 않으면, axios의 params가 한 번에 적용이 안 돼서 backend에서 데이터를 제대로 못 받아올 가능성이 크다.
(나는 이거를 제대로 모르고 삽질하다가, 계속 코드에서 스페이스바를 쳐가면서 변경사항을 만들어 api를 받아오는 방식으로 이상한 짓을 하다가 3-4일 만에 고쳤다^^)

const getData = async () => {
  try {
    await Axios.get(
    `/api/note/${noteId}`
    )
  .then(
    console.log('get data')
    )
  .catch(
    console.log(error);
    )
  }
  catch (error) {
    console.log(error);
  }
  
}

useEffect(() => {
  setNoteId(route.params.noteId);
  getData();
}, [noteId])

이때 가장 중요한 건 useEffect의 [ ] 안에 필요한 parameter를 꼭 넣어주는 거다. 이걸 안 넣어주면 api 연결이 제대로 되지 않는다.