Unsplash API를 사용하여 React에서 이미지 검색 앱을 만드는 방법

이 튜토리얼에서는 Unsplash API를 사용하여 방대한 이미지 컬렉션에 액세스하고 다운로드하는 이미지 검색 앱을 만듭니다.

앱의 개발 부분을 시작하기 전에 어떻게 될지 살펴보겠습니다look exactly .

시작하자…

내용물

React 앱을 만드는 방법

앱의 UI를 구축하는 방법

Unsplash에서 액세스 키 및 API 끝점을 가져오는 방법

앱에서 후크를 사용하는 방법

앱에서 이미지를 표시하는 방법

오류 처리 방법

결론

우리는 무엇을 배울 것인가?

이 프로젝트는 주로 초보자를 대상으로 하지만 실력을 연마하고 싶은 사람이라면 누구나 따라할 수 있습니다. 이 자습서에서는 다음을 배웁니다.

Unsplash 개발자 대시보드에서 API 끝점 및 액세스 키를 가져오는 방법.

useState 및 useEffect 후크를 사용하여 API에서 데이터를 가져오는 방법.

맵 기능을 사용하여 API의 이미지 또는 기타 데이터를 표시하는 방법입니다.

반응 앱을 만드는 방법

React 앱을 만드는 것은 매우 쉽습니다. 선호하는 IDE에서 작업 디렉토리로 이동하고 터미널에 다음 명령을 입력하기만 하면 됩니다.
npx create-react-app image-search-app
create-react-app 프로젝트를 올바르게 설정하는 방법이 확실하지 않은 경우 create-react-app-dev에서 공식 가이드를 참조할 수 있습니다.‌‌

설정 후 동일한 터미널에서 npm start를 실행하여 React 앱이 호스팅될 localhost:3000을 시작합니다. 또한 모든 변경 사항을 볼 수 있습니다.

앱의 UI를 구축하는 방법

앱의 UI에는 다음 두 섹션이 있습니다.

입력 섹션

이미지를 표시할 결과 섹션에서

입력 섹션에는 검색어 또는 쿼리를 작성할 입력 태그가 있습니다. 또한 API에서 데이터를 가져오는 기능을 트리거하는 onClick 이벤트 핸들러가 있는 버튼도 있습니다.

import React from "react";
const App = () => {
  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-12 d-flex justify-content-center align-items-center input">
            <input
              className="col-3 form-control-sm py-1 fs-4 text-capitalize border border-3 border-dark"
              type="text"
              placeholder="Search Anything..."
            />
            <button
              type="submit"
              onClick={Submit}
              className="btn bg-dark text-white fs-3 mx-3"
            >
              Search
            </button>
          </div>
        </div>
      </div>
    </>
  );
};
export default App;

출력은 다음과 같습니다.

In this article, we will not be discussing the styling part of the app. This way we can stay more focused on the React part which is more necessary to understand.

Continue Reading .