React.js에서 간단한 이미지 슬라이더 만들기

안녕! 오늘은 외부 패키지를 사용하지 않고 React에서 간단한 이미지 슬라이더를 만드는 방법을 살펴보겠습니다. Flatiron School에서 React 프로젝트를 작업할 때 이미지 슬라이더를 포함하고 싶었지만 어디서부터 시작해야 할지 몰랐습니다. 인터넷 검색을 통해 애플리케이션에 외부 종속성을 설치하는 것과 관련된 자습서만 볼 수 있었습니다. React를 처음 접하는 사람으로서 저는 처음부터 이미지 슬라이더를 만들고 싶었습니다. 면책 조항으로, 이 튜토리얼에서 어떤 스타일도 다루지 않을 것입니다. 이것은 이미지를 순환할 수 있는 React 구성 요소로 시작하기 위한 것입니다. 이것이 당신이 관심있는 것이라면 계속 읽으십시오!

설정

새로운 React 앱을 만들어 시작하겠습니다. 터미널/명령줄에 다음을 입력합니다.

npx create-react-app image-slider

그런 다음 image-slider 디렉토리로 이동하여 즐겨 사용하는 텍스트 편집기에서 엽니다(저는 VSCode 사용).

cd image-slider
code . 

또한 브라우저에서 변경 사항을 볼 수 있도록 코딩하는 동안 개발 서버에서 앱을 실행하는 것이 좋습니다. 터미널에 npm start를 입력하면 됩니다. 그러면 브라우저에서 URL이 http://localhost:3000 인 새 탭이나 창이 열립니다. 또한 Chrome을 브라우저로 사용하는 경우 React Developer Tools 확장 프로그램을 설치하는 것이 좋습니다.

그런 다음 src 폴더에 있는 App.js 파일을 엽니다. 다음 내용이 표시되어야 합니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

일을 단순화하기 위해 이 튜토리얼에서 불필요한 코드를 많이 제거하고 "Image Slider"의 헤더를 반환하기만 하면 됩니다. 또한 App 구성 요소를 arrow function 으로 리팩토링하겠습니다.

import React from "react";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <h1>Image Slider</h1>
    </div>
  );
}

export default App;

자, 이제 애플리케이션 빌드를 시작할 준비가 되었습니다.

앱 구성 요소

사용자가 검색 양식에 텍스트를 입력할 수 있는 간단한 앱을 빌드하면 앱에서 사용자가 쿼리의 이미지를 클릭할 수 있는 이미지 슬라이더를 반환합니다. 이 자습서에서는 Pixabay API에서 이미지를 가져오지만 원하는 이미지 API를 자유롭게 사용할 수 있습니다.

먼저 하나의 텍스트 입력 필드와 제출 버튼이 있는 양식을 만듭니다.

import React from "react";
import "./App.css";

const App = () => {
  return (
    <div className="App">
      <h1>Image Slider</h1>
      <form>
        <input type="text" />
        <input type="submit" value="Search" />
      </form>
    </div>
  );
};

export default App;

다음으로 useState React hook을 사용하여 입력 필드의 상태를 관리합니다. 또한 입력 필드에 이벤트 리스너onChange를 설정하고 양식에onSubmit 이벤트 리스너를 설정합니다. 아래 댓글을 참조하세요.

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [query, setQuery] = useState(""); // declaring state variable "query" and "setQuery" method to update query state

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(query); // logging the value of query to test that the form is working
  };

  return (
    <div className="App">
      <h1>Image Slider</h1>

      <form onSubmit={handleSubmit}> {/* handleSubmit function will be called on form submit */}
        <input type="text" onChange={(e) => setQuery(e.target.value)} /> {/* onChange event listener will call setQuery to update query state variable */}
        <input type="submit" value="Search" />
      </form>
    </div>
  );
};

export default App;

App에서 ImageSlider 구성 요소(아직 빌드되지 않음)로 이미지를 소품으로 전달하므로 useState 후크로 이미지 상태를 설정하고 Pixabay API에 대한 가져오기 호출을 handleSubmit에 추가합니다. ) 기능:

import React, { useState } from "react"; // import useState hook
import "./App.css";

const App = () => {
  const [query, setQuery] = useState("");
  const [images, setImages] = useState([]); // declare state variable "images" to an empty array and "setImages" method to update images state

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch(
      `https://pixabay.com/api/?key=[api-key]&q=${query}`
    )  // fetch to API by passing in query state
      .then((response) => response.json())
      .then(({ hits }) => hits.map(({ webformatURL }) => webformatURL)) // use object destructuring to grab image urls from json response
      .then(setImages); // call setImages to update images state with image urls
  };

  return (
    <div className="App">
      <h1>Image Slider</h1>

      <form onSubmit={handleSubmit}>
        <input type="text" onChange={(e) => setQuery(e.target.value)} />
        <input type="submit" value="Search" />
      </form>
    {/* Will import ImageSlider component here */}
    </div>
  );
};

export default App;

이제 App 구성 요소가 설정되었으므로 이제 App으로 가져올 ImageSlider 구성 요소를 빌드할 수 있습니다.

이미지슬라이더 구성요소

src 폴더에 components라는 새 폴더를 만들고 그 안에 ImageSlider.js라는 새 파일을 만듭니다. 여기에서 이미지 슬라이더를 만들 것입니다.

ImageSlider 구성 요소는 App에서 이미지(이미지 URL 배열)를 소품으로 가져오고 "왼쪽"및 "오른쪽"버튼과 함께 배열의 첫 번째 이미지를 반환합니다. 사용자가 버튼을 클릭하면 ImageSlider는 배열의 다음 또는 이전 이미지를 반환하여 이미지를 순환하는 기능을 만듭니다.

import React, { useState } from "react";

const ImageSlider = ({ images }) => { // takes in images as props
  const [index, setIndex] = useState(0); // create state to keep track of images index, set the default index to 0

  const slideRight = () => {
    setIndex((index + 1) % images.length); // increases index by 1
  };

  const slideLeft = () => {
    const nextIndex = index - 1;
    if (nextIndex < 0) {
      setIndex(images.length - 1); // returns last index of images array if index is less than 0
    } else {
      setIndex(nextIndex);
    }
  };

  return (
    images.length > 0 && (
      <div>
        <button onClick={slideLeft}>{"<"}</button>
        <img src={images[index]} alt={index} />
        <button onClick={slideRight}>{">"}</button>
      </div>
    )
  );
};

export default ImageSlider;

마지막으로 ImageSlider를 App으로 가져오기만 하면 됩니다.

import React, { useState } from "react";
import ImageSlider from "./components/ImageSlider"; // import ImageSlider
import "./App.css";

const App = () => {
  const [query, setQuery] = useState("");
  const [images, setImages] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch(
      `https://pixabay.com/api/?key=[api-key]&q=${query}`
    )
      .then((response) => response.json())
      .then(({ hits }) => hits.map(({ webformatURL }) => webformatURL))
      .then(setImages);
  };

  return (
    <div className="App">
      <h1>Image Slider</h1>

      <form onSubmit={handleSubmit}>
        <input type="text" onChange={(e) => setQuery(e.target.value)} />
        <input type="submit" value="Search" />
      </form>

      <ImageSlider images={images} /> {/* return ImageSlider and pass images as a prop */}
    </div>
  );
};

export default App;

축하합니다. 처음부터 React에서 이미지 슬라이더를 성공적으로 만들었습니다! 이제 작동하는 이미지 슬라이더가 있으므로 다음으로 할 일은 여기에 고유한 스타일(CSS 전환, 애니메이션, 사용자 정의 아이콘 등)을 추가하는 것입니다. 이 튜토리얼이 어떤 식으로든 도움이 되었기를 바랍니다. 즐거운 코딩! :)