[Axios] api 사용 및 오류수정

1. 오픈 API 연결 (Axios) 및 데이터 타입 명시

 

오픈 api URL 을 생성하고 axios를 통해 데이터를 가져오기로 함. 그러나 데이터가 object 타입이라 읽지 못해 오류 발생

 

 

-> 데이터가 object 인 경우, 가져올 데이터의 타입을 정확하게 명시해야함.

 

 

axios의 경우, 기본값이 json을 포함하고 header, body등 따로 명시할 필요가 없지만 데이터가 불려지지 않으므로 

body : JSON.stringfy(data) 를 명시, .then response 영역에도 한번 더 명시.

그리고 가져오는 데이터 형식에 key 명을 기재.

 

JSON.stringfy(data.name) 등등 -> 구체적으로 가져오는 데이터 타입을 불러야함.

 

 

정상적으로 데이터를 끌고오는게 보여짐.

 

 

2. input 의 value 값에 따라 api 값 끌고 오기

 

input 창에 검색하는 키워드에 따라 사용할 api 요소를 끌어오려함.

리액트의 경우, DOM 요소를 사용할 수 없으므로 useState를 이용하기로 함.

 

useState를 통해 city에 setCountry 의 값을 저장. 

 

setCountry 함수는 input 의 onChange 요소 함수로 작용.

( setCountry 함수는 DOM요소 지정을 대체함과 동시에 onChange를 통해 input 요소의 값에 따른 변화를 적용하려는 함수.

  e.target.value를 이용해 타겟을 잡고 값이 매번 달라질 수 있도록 설정 )

 

그리고 setCity 는 input.value 값이 되므로 URL주소에 객체로 사용하기 위해 URL 주소에 변수명 city를 삽입

city = setCity = input.value = 검색창에 입력하는 검색값 -> 검색하는 나라의 api 값이 되도록 연결

 

 

여기서 주의할 점은, useState의 값들은 만든 함수 혹은 변수명보다 상단에 위치해 있어야 작동이 됨.

그러므로, useState 값은 맨상단에 위치하도록 설정!

 

 

 

마지막으로 인터넷 환경에 따라 axios의 통신이 왔다갔다 하므로 그에 대한 보완이 필요함.

key값을 지정해도 읽지 못하는 경우가 있음.