ReactJS에서 배열 래핑

어떤 종류의 텍스트, 리뷰 같은 것을 표시하거나 각각의 버튼을 클릭하여 next 및 previous 이미지를 볼 수 있는 사진만 표시하고 싶습니다. 그렇게 하려면 배열을 래핑하는 방법을 알아야 합니다. 이번 포스팅에서는 그것을 보여드리겠습니다.

여기에서 소스 코드를 찾을 수 있습니다 => https://github.com/muratcan-yuksel/react-wrap-array

우선 data.js 파일을 만들고 다음을 넣습니다 =>

const data = [
  {
    id: 1,
    text: "1st Text",
  },
  {
    id: 2,
    text: "2nd Text",
  },
  {
    id: 3,
    text: "3rd Text",
  },
  {
    id: 4,
    text: "4th Text",
  },
  {
    id: 5,
    text: "5th Text",
  },
];
export default data;

내 응용 프로그램에서 이 데이터 배열 개체를 통해 매핑하고 싶지 않습니다. 아니요, 매번 하나만 표시하고 싶습니다. 내 App.js 파일 확인=>

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

const App = () => {
  const [index, setIndex] = useState(0);
  const { id, text } = data[index];

  const nextItem = () => {
    setIndex((index) => {
      let newIndex = index + 1;
      return wrapItems(newIndex);
    });
  };

  const previousItem = () => {
    setIndex((index) => {
      let newIndex = index - 1;
      return wrapItems(newIndex);
    });
  };

  const wrapItems = (itemIndex) => {
    if (itemIndex > data.length - 1) {
      return 0;
    } else if (itemIndex < 0) {
      return data.length - 1;
    } else {
      return itemIndex;
    }
  };

  return (
    <div id={id} className="container">
      <div className="title">{text} </div>
      <div className="buttons">
        <button onClick={previousItem} className="btn">
          Previous
        </button>
        <button onClick={nextItem} className="btn">
          Next
        </button>
      </div>
    </div>
  );
};

export default App;

먼저 React에서 useState 후크, 방금 생성한 data.js 파일, 걱정할 필요가 없는 style.css 파일을 가져옵니다. 확인하고 싶으시면 위의 소스 코드를 어쨌든 제공했습니다.

내 상태를 0 로 설정했습니다. 이것은 data 배열에서 페이지에 표시하려는 요소의 인덱스가 됩니다. const { id, text } = data[index];를 사용하면 text 또는 id 변수를 사용하려고 할 때마다 상태 인덱스에서 데이터 배열의 항목을 가리키도록 데이터를 구조화합니다. 즉, 상태가 변경되면 id 및 text는 데이터 배열에서 data.js의 다른 항목을 가리킵니다.

이제 내 return 문에 ₺ext 를 표시하고 두 개의 버튼도 있습니다. 하나는 이전 항목을 가리키고 다른 하나는 다음 항목을 가리킵니다. 나는 또한 그들에게 몇 가지 기능을 첨부했습니다.
nextItem 함수는 상태를 plus 중 하나로 설정합니다. 이제 상태를 직접 수정할 수 없으므로 작업을 수행하고 조작할 함수를 작성해야 합니다index . previousItem 함수는 그 순간에 상태를 minus로 설정한다는 점을 제외하면 동일합니다. 그러나 반환된 newIndex가 wrapItems' 함수 안에 래핑되어 있음도 알 수 있습니다.
wrapItems 함수가 존재하는 이유는 그렇지 않은 경우 데이터 배열의 마지막 항목인 5번째 항목에 도달할 때마다 배열에 5개의 항목만 넣었기 때문에 인덱스가 시작됨에 따라 4번째 인덱스를 의미하기 때문입니다. 0에서 nextItem는 상태를 계속해서 플러스 1로 업데이트하여 인덱스를 5로 만들고 응용 프로그램이 충돌합니다. 데이터 배열의 인덱스 5에 항목이 없기 때문에 충돌이 발생합니다. 지옥, 우리는 인덱스 5를 전혀 가지고 있지 않습니다. previousItem 함수에서도 같은 일이 분명히 발생하며 앱은 인덱스 -1에서 충돌합니다. wrapItems 함수는 이 문제를 해결합니다.

이제 wrapItems 함수는 숫자를 사용하며 아마도 다음과 같이 해석됩니다.

상태에서 오는 인덱스인 주어진 숫자가 데이터 배열의 마지막 인덱스(항목이 5개 있고 인덱스가 0부터 시작하므로 4임)보다 크면 0을 반환하여 ' d 처음부터 시작합니다.

인덱스가 0보다 작은 경우(즉, 첫 번째 인덱스에 있음을 의미하며, 음수의 세계에 빠져 앱이 충돌할 수도 있음을 의미합니다. 상태를 마지막 인덱스로 업데이트합시다. 데이터 배열을 사용하여 첫 번째 항목에 있을 때 적절한 버튼을 클릭하여 previousItem 함수를 실행하면 충돌한 앱이 아닌 마지막 항목이 표시됩니다.

그렇지 않으면 괜찮습니다. 아무것도 하지 마십시오.

그게 다야. 건배!