React에서 더 많은 로직을 생성하는 방법

따라서 일반적으로 우리는 건너뛰기 값을 전달하는 백엔드 API를 사용하여 더 많은 로직을 사용하는 것을 선호하며 다음 데이터 세트를 반환하지만 일부 특정 경우에 대해 프런트엔드에서 동일한 로직을 구현하려는 경우에는 어떻게 해야 합니까? 이 기사에서는 React에서 더 많은 로직을 생성하는 방법을 배웁니다.

체크아웃 this 백엔드에서 더 나은 페이지 매김 방법.

문제

프런트엔드에 100개 객체의 배열이 있고 한 번에 n개 항목만 표시하고 다음 데이터 집합이 l*oad more* 버튼 클릭 시 로드된다고 가정해 보겠습니다.

우리는 일반적으로 건너뛰기 값을 전달하는 백엔드를 사용하여 이 작업을 수행하고 다음 데이터 집합을 반환하지만 이제 React Frontend에서 동일한 작업을 수행하려고 합니다.

해결책

우선 더 많은 로직을 로드하기 위한 변수가 거의 없을 것입니다.

데이터의 길이는 LENGTH를 사용하여 지정됩니다.

const LENGTH = 50;

그 후 길이가 LENGTH인 Array DATA를 만들었습니다.

const DATA = [ ...Array(LENGTH).keys() ];

그런 다음 UI, 즉 IMAGE_SRC에 표시되는 임의의 이미지입니다.

const IMAGE_SRC="https://source.unsplash.com/random";

한도는 10입니다. 즉, LIMIT

const LIMIT = 10;

const LENGTH = 50;
const DATA = [ ...Array(LENGTH).keys() ];
const IMAGE_SRC="https://source.unsplash.com/random";
const LIMIT = 10;

이제 우리는 몇 가지 상태를 작성할 것입니다.

또한 단순화를 위해 lodash의 슬라이스와 연결을 사용할 것입니다.

더 많은 기록이 있는지 확인하기 위해.

const [showMore,setShowMore] = useState(true);

초기 렌더링 목록

const [list,setList] = useState(slice(DATA, 0, LIMIT));

인덱스 관리용.

const [index,setIndex] = useState(LIMIT);

우리의 load more 로직은 다음과 같은 일을 할 것입니다.

LIMIT를 추가하여 인덱스를 업데이트합니다.

더 많은 기록이 있는지 확인하십시오.

어레이에 다음 세트를 추가하여 목록을 업데이트합니다.

  const loadMore = () =>{
    const newIndex = index + LIMIT;
    const newShowMore = newIndex < (LENGTH - 1);
    const newList = concat(list, slice(DATA, index, newIndex));
    setIndex(newIndex);
    setList(newList);
    setShowMore(newShowMore);
  }

우리의 Render 메서드는 이미지 목록과 추가 로드 버튼을 반환할 것입니다.

   <div className="App">
      <div className="image-container">
      {list.map(()=><img src={IMAGE_SRC} alt="random"/>)}
      </div>
      {showMore && <button onClick={loadMore}> Load More </button>}
    </div>

전체 구성 요소는 다음과 같습니다.

import React,{useState} from "react";
import {
  slice, concat, 
} from 'lodash';

import "./styles.css";

const LENGTH = 50;
const DATA = [ ...Array(LENGTH).keys() ];
const IMAGE_SRC="https://source.unsplash.com/random";
const LIMIT = 10;

export default function App() {
  const [showMore,setShowMore] = useState(true);
  const [list,setList] = useState(slice(DATA, 0, LIMIT));
  const [index,setIndex] = useState(LIMIT);

  const loadMore = () =>{
    const newIndex = index + LIMIT;
    const newShowMore = newIndex < (LENGTH - 1);
    const newList = concat(list, slice(DATA, index, newIndex));
    setIndex(newIndex);
    setList(newList);
    setShowMore(newShowMore);
  }
  return (
    <div className="App">
      <div className="image-container">
      {list.map(()=><img src={IMAGE_SRC} alt="random"/>)}
      </div>
      {showMore && <button onClick={loadMore}> Load More </button>}
    </div>
  );
}

이와 유사한 출력이 표시됩니다.



React Frontend 로드 로직이 준비되었습니다.