내용 목차
Unsplash API 사용법 : 해당 api를 이용해서 이미지를 가져오는 React app을 만들어 봅시다.
해당 API 를 사용하려면 먼저 Unsplash developers에 등록하여 access key를 소유하고 있어야 합니다. 그 방법은 다른 포스트에서 정리해 두었습니다.
![](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img/https://nscworld.net/wp-content/uploads/2022/04/dkkvu4n1zzw-e1649783081498.jpg)
Unsplash API 사용법 : 리액트 앱 만들기
최종 결과 화면은 아래와 같습니다.
![Unsplash API 사용법](https://sp-ao.shortpixel.ai/client/to_auto,q_glossy,ret_img,w_1024,h_637/https://nscworld.net/wp-content/uploads/2022/04/최종결과-화면-1024x637.jpg)
핵심 부분은 아래와 같습니다.
useState, useEffect 훅을 이용합니다. useState는 input의 입력값(img)과 이미지 배열 데이터(res)를 컨트롤하기 위해 사용하고, useEffect는 unsplash에 접근해서 데이터를 가져오는 것을 특정 조건에서만 실행하기 위해서 사용할 것입니다.
import React, { useState, useEffect } from 'react';
const [img, setImg] = useState(''); const [res, setRes] = useState([]);
아래의 내용은 fetch()함수를 사용하여 이미지 데이터를 json 형태로 가져와서 res 변수에 담아주는 것입니다. 이때 useState()를 사용합니다.
const Access_Key = 'Your ACCESS KEY'; //이 부분은 여러분의 액세스키 값으로 바꿔야함. const url = `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}&orientation=landscape&per_page=20`; const fetchRequest = async () => { const response = await fetch(url); const responseJson = await response.json(); const result = responseJson.results; console.log(result); setRes(result); };
아래의 내용은 위에서 데이터 가져오기 함수(fetchRequest)를 search 버튼이 눌릴 때 마다 실행하는 것입니다. setImg(”)는 찾기 버튼이 눌려지고 이미지들이 뿌려지고 나면 input 안의 내용을 비워주는 것입니다.
const submit = () => { fetchRequest(); setImg(''); };
아래의 내용은 이제 map() 메서드를 이용해서 이미지를 뿌려주는 내용입니다.
key={}는 리액트에서 고유 키값이 없으면 콘솔에서 에러를 방출하는 것을 제거하기 위해 넣은 것입니다. val.id, val.urls.thumb, .. 등의 값은 unsplash에서 가져온 이미지의 json 데이터의 내용입니다.
<div className="imgContainer"> {res.map((val) => { return ( <img key={val.id} src={val.urls.thumb} alt={val.alt_description} /> ); })} </div>
최종 코드
//App.js 파일 import React, { useState, useEffect } from 'react'; import './App.css'; function App() { const [img, setImg] = useState(''); const [res, setRes] = useState([]); const Access_Key = 'Your ACCESS KEY'; //이 부분은 여러분의 액세스키 값으로 바꿔야함. const url = `https://api.unsplash.com/search/photos?page=1&query=${img}&client_id=${Access_Key}&orientation=landscape&per_page=20`; const fetchRequest = async () => { const response = await fetch(url); const responseJson = await response.json(); const result = responseJson.results; console.log(result); setRes(result); }; useEffect(() => { fetchRequest(); }, []); const submit = () => { fetchRequest(); setImg(''); }; return ( <div> <div> <div className="search"> <input type="text" value={img} onChange={(e) => setImg(e.target.value)} placeholder="Searching Anything..." /> <button type="submit" onClick={submit}> Search </button> </div> <div className="imgContainer"> {res.map((val) => { return ( <img key={val.id} src={val.urls.thumb} alt={val.alt_description} /> ); })} </div> </div> </div> ); } export default App;
스타일하는 CSS 부분은 여러분이 직접 하는 것이 좋겠습니다. 저는 스타일링은 잘 못합니다. 그래도 그냥 참고 삼아 올립니다.
/* App.css 파일 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgb(43, 43, 43); } .search { margin: 20px; } .search input { width: 420px; height: 40px; margin-right: 20px; padding-left: 10px; font-size: 1.5em; border: 0; } .search button { width: 120px; height: 40px; font-size: 1.5em; background-color: bisque; border: 0; } .imgContainer { margin: 20px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 133px); column-gap: 10px; row-gap: 15px; } .imgContainer img { display: block; width: 200px; height: 133px; object-fit: cover; border: 1px solid rgb(140, 140, 140); }
이상으로 react로 unsplash 이미지를 가져오는 웹앱을 만들어 봤습니다.