(React Native) Expo) Spring boot와 연결

현재 팀 개발을 하면서 React Native에서 Spring boot로 데이터를 보내고 받는 역할을 맡아서 진행하면서 느꼈던 점을

조금 작성해보려고 한다.

 

1. axios를 다운 받아야한다.

 

  해당 React Native 파일의 터미널을 열어서 아래 문구를 입력한다.

  "npm install axios"

 

다운이 다 받아지면 해당 js파일로 가서
" import axios from 'axios'; " 를 써주면 된다.

 

2. 서버에 보내는 타이밍을 설정해 줘야한다.

 2-1. 해당 js 페이지에 도착 했을 때 (useFocusEffect 사용)
 2-2. 해당 js 페이지 안의 변수가 변경 되었을 때 (useEffect 사용)
 2-3. 해당 버튼 또는 TouchableOpacity를 눌렀을 때 등등

 

 자신이 원하는 타이밍에 하도록 하면 된다.

 

3. 설정했다면 이제 서버로 데이터를 보낼 코드를 작성하면 된다.

위의 사진에서 보다시피 일단 2-3 방식을 선정했다.

 

1번에는 서버에서 설정해준 url을 넣어주면 된다. 그러면 밑에 userData는 뭔지 궁금할텐데 저것도 서버에서 설정해준 데이터 형태로 보내주어야 한다. 변수 이름을 무조건 같게 해야된다하면 똑같이 보내주면 서버에서 처리하기 때문에 React Native에서는 서버에서 정해준 url과 변수명( + 데이터)를 보내주면 된다.

 

 url 위에 보면 const respose = await axios.post를 볼 수 있는데, 끝에 post는 서버에서 정해주는 대로 보내주면 된다.

그리고 아래에 response.status ===201을 보면 해당 201이라는 숫자도 서버에서 우리에게 성공했다라는 뜻으로 설정해서 보내준 것이다. 그렇기에 우리는 서버에서 주는 응답 상태로 구분 하여 성공, 실패, 오류로 나눠서 볼 수 있다.

 

console.log를 통해서 서버에서 보내서 주는 데이터 값을 보는 것이 나중에 구분하기 편하다.
그리고 에러가 많이 발생할 수도 있다.
TypeError 또는 AxiosError 가 가장 많이 떴던거 같은데, TypeError의 경우 서버가 알려준 변수명을 잘못 입력했거나

데이터 타입을 서버에서 요청한 대로 보내지 않았기에 뜬 것이기에 보통 React Native 내에 문제가 있다.
AxiosError는 url을 잘못 적었거나 아직 서버에서 제대로 배포를 안했을 가능성이 있다. 

 

4. 정리

서버측에서 알려주는 url, 변수명(+ 데이터)를 자세히 확인하자

서버로 보낼 때 post, get 등 제대로 확인하자

 Error의 종류에 따라 처리하는 방식도 다르니 잘 확인하자

 

무조건 잘 확인하자