open-api

huni_·2022년 7월 6일

API open API

오픈 API란 누구든지 사용할 수 있도록 공개된 API를 말합니다.

예를들면, 동물 이미지, 날씨 정보, 바이러스 정보, 금융 정보 등 여러 정보들을 API를 통해 무료로 데이터를 사용할 수 있습니다.

이런 오픈 API를 잘 활용하면, 백엔드 없이도 서비스를 만드는 것이 가능합니다.

다양한 오픈API 사이트 모음

https://github.com/public-apis/public-apis

→ 구글에 public api를 검색하시면 나옵니다.

Dogs open-api 실습

위의 링크를 클릭해 들어가 여러가지 카테고리 중 animals 를 들어갑니다.

animals에 들어가 Dogs를 클릭합니다.

아래 사진 부분의 Fetch!를 이용해 주소를 복사해주세요 .

지난 API통신을 배울 때 rest-api를 연습하는 도구는 postman임을 배웠습니다.

오늘도 역시 postman을 이용해 먼저 연습해보도록 하겠습니다.

구글에 postman chrome을 입력해주세요.

웹 스토어를 클릭해 앱실행 버튼을 눌러주세요 .

아까 복사해온 주소를 입력후 send를 눌러주시면 response로 강아지의 이미지 주소를 받을 수 있습니다.

useEffect와 open-api

vscode로 돌아와 우리는 axios를 이용해 get을 해오겠습니다.

이전 수업에서는 버튼을 누르면 요청이 날아가도록 이벤트 함수를 걸어주었지만, 이번 수업에서는 브라우저가 실행되자마자 요청을 날리고 싶어 useEffect를 사용해보겠습니다.

우선, axios를 사용하기위해 axios를 설치하고 import 해와야 합니다. (우리는 첫날 모두 설치 했으므로 import만 해오면 되겠습니다.)

// axios를 이용해 open API 이용하기
import axios from 'axios'

const Dogs = ()=>{
	// 강아지 이미지 주소를 저장해둘 state
	const [dogsUrl,setDogUrl] = setState("")

	// axios 날리기 _ 주소는 postman에서 사용했던것과 동일합니다.
	// 마운트 될 때 한번만 요청할 수 있도록 의존성배열( [ ] )을 적어주었습니다.**
	useEffect(()=>{
		const fetchDog = async ()=>{
			const result = await axios.get("복사해온 주소")
			console.log(result.data.message)
			setDogUrl(result.data.message)
		}

		// fetchDog 함수 호출해오기
		fetchDog()
	},[])

	return(
		<div>
			<img src={dogsUrl} />
		</div>
	)
}

💡 브라우저가 실행되자마자 실행하려면, useEffect를 사용하지않고 그냥 적어줘도 되지않나요?

→ 가능은 합니다. 하지만, 리렌더면에서 비효율적으로 작동됩니다.
리렌더의 조건에는 state의 변화가 있습니다. 그렇다면 컴포넌트의 state가 변할때마다 다시 렌더하게 되겠죠?
불필요한 리렌더는 제거하는 것이 가장 효율적입니다.

open API 끌어오기 리뷰

지난 시간에 우리는 open API를 끌고 오는 방법에 대해 공부했습니다.

따라서 오늘은 open API로 새로운 페이지를 만드는 과정을 리뷰하도록 하겠습니다.

// 첫 마운트시에만 요청을 보낼 수 있도록 의존성 배열을 같이 적어줍니다.
// open api가 대부분 rest-API 이기 때문에 대부분 axios를 이용합니다.

useEffect(()=>{
	new Array(9).fill(1).map(()=>{
		cosnt result: any = await axios.get(
		//open API 주소
		)
		setImgUrls(result.data.message)
		
		//이전 데이터를 배열에 쌓아주는 역할
		setImgUrls((prev)=>[...prev, result.data.message])
	})
},[])

💡 왜 useEffect와 함께 사용해야 할까요?

우리는 브라우저가 실행되자 마자 요청을 날려주었으면 좋겠습니다.

지난시간에도 설명을 드렸지만 state가 변화하면 화면이 리렌더 됩니다. 따라서 useEffect를 사용하지 않고 그냥 요청을 하게되면 불필요한 리렌더가 지속적으로 일어나기 때문에 비효율적입니다.
따라서 첫 마운트시에만 요청할 수 있도록 useEffect에 []를 넣어 사용합니다.