Unsplash API 사용법 이미지 가져오기

Unsplash API 사용법 : 해당 api를 이용해서 이미지를 가져오는 React app을 만들어 봅시다.

해당 API 를 사용하려면 먼저 Unsplash developers에 등록하여 access key를 소유하고 있어야 합니다. 그 방법은 다른 포스트에서 정리해 두었습니다.

Unsplash API 액세스키 만드는 방법 – 도롱뇽 BLOG

Unsplash API 액세스키 등록 방법을 설명합니다. 그리고 HTML, JS를 이용해서 간단하게 사용하는 방법에 대해서도 알아봅니다. 웹페이지에서 이미지를 다룰 때 편리할 것 같다는 생각이 드네요.

Unsplash API 사용법 : 리액트 앱 만들기

최종 결과 화면은 아래와 같습니다.

핵심 부분은 아래와 같습니다.

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 이미지를 가져오는 웹앱을 만들어 봤습니다.