🎉Floodgate 발표: React 🌊용 "더 많이 로드"구성 요소

2년 이상의 개발 끝에 React Floodgate이 1.0.0 버전으로 출시되었음을 알려드립니다!

Floodgate는 React.js에 대한 "더 많은 로드"구성 요소로, 대기 중인 데이터를 관리하고 업데이트하는 복잡성을 취하고 이를 직관적인 경험으로 전환합니다. 구성에 대한 최소한의 접근 방식을 취합니다. 단 하나의 필수 소품과 render prop pattern을 사용하여 개발자는 사용 가능한 데이터의 양과 렌더링 방식을 정밀하게 제어할 수 있습니다.

Floodgate의 기본적인 구현을 빠르게 살펴보려면 아래 예를 확인하세요.

import React from "react";
import Floodgate from "react-floodgate";

export default function LoadMore() {
  const albums = ["For Emma, Forever Ago", "Bon Iver, Bon Iver", "22 a million", "i,i"];
  return (
    <Floodgate data={albums} initial={1} increment={1}>
      {({ items, loadNext, loadComplete }) => (
        <React.Fragment>
          <h1>Bon Iver Albums</h1>
          <ol>
            {items.map(album => <li>{album}</li>)}
          </ol>
          <button onClick={loadNext} disabled={loadComplete}>Add Album</button>
        </React.Fragment>
      )}
    </Floodgate>
  );
}

이것이 작동하는 "더 로드"구성 요소를 만드는 데 필요한 전부입니다!

지금 Floodgate 사용을 시작하려면 React 프로젝트에 설치하세요.

# using npm
npm i react-floodgate

# using yarn
yarn add react-floodgate

특징

Floodgate는 최소한의 기능이지만 그 기능이 다른 구성 요소 및 패턴과 함께 어떻게 활용되는지에 따라 엄청나게 강력할 수 있습니다. 아래에서 Floodgate가 할 수 있는 작업에 대한 간략한 소개를 확인하세요. README file을 확인하여 더 깊은 이해와 기술적인 세부 사항을 얻으십시오.

📊 모든 유형의 데이터 소비

Floodgate의 data 소품은 배열이 전달되기만 하면 됩니다. 그 배열은 비어 있는 것을 포함하여 무엇이든 될 수 있습니다! 문자열, 구문 분석된 JSON 개체, React 구성 요소, 심지어 JavaScript 함수도 전달할 수 있습니다. Floodgate는 이러한 항목의 렌더링 및 구현을 개발자에게 맡깁니다.
data={["hello", "world"]} , data={[<li>Eggs</li>, <li>cereal</li>, <li>paper towels</li>]} , data={[]} 와 같은 값은 모두 Floodgate에 전달하기에 유효합니다. 참고로, Floodgate는 어떤 유형의 항목이 배열을 구성하는지 신경 쓰지 않지만 모든 배열 요소에서 유형이 균일한지 확인하는 것이 좋습니다.

🔢 렌더링할 항목의 수량 결정

Floodgate에 data 배열에서 initial 소품을 사용하여 초기 렌더링에 로드해야 하는 항목 수를 알려줍니다. increment prop은 render prop 함수에서 loadNext()에 대한 후속 호출에서 로드되는 항목 수를 처리합니다.

🎛 상위 구성 요소에서 소품 관리

React의 수명 주기 메서드와 사용자 정의 콜백 소품을 활용하면 Floodgate의 소품을 상위 구성 요소의 상태로 완전히 관리할 수 있으므로 인스턴스의 데이터를 비동기식으로 업데이트하거나 최종 사용자가 로드되는 항목 수를 더 잘 제어할 수 있습니다. 나는 이것을 Controlled Floodgate 패턴이라고 부른다.

☎️ 이벤트 기반 콜백 소품으로 이벤트 처리

render prop 함수는 자식 구성 요소에서 호출할 Floodgate 메서드의 수를 노출합니다. 즉, loadNext , loadAll , reset 및 exportState 입니다. 이러한 메서드가 호출되면 Floodgate는 on[MethodName] 소품에 제공된 함수를 호출합니다(제공된 경우).

🔮 컨텍스트 API 활용

Floodgate는 v0.6.0부터 React의 Context API을 활용하므로 개발자가 FloodgateContext 내보내기를 사용하여 필요한 곳이면 어디든지 render prop에 노출된 메소드를 전달할 필요가 없습니다.

🛠 TypeScript로 제작

Floodgate는 Typescript로 구축되었으며 향상된 개발자 경험을 위해 types definition file과 함께 배포됩니다.

예

Floodgate가 어떻게 작동하는지 더 잘 이해하려면 다음을 확인하십시오Codesandbox.io examples. 코드가 설정되는 방식과 최종 사용자가 상호 작용할 결과 앱을 볼 수 있습니다.

사용 중인 Floodgate의 실제 예는 내 개인 사이트writing page에 있습니다.

로드맵

이 프로젝트는 매우 친환경적이지만 문제를 해결하고 Floodgate 사용자의 즉각적인 요구를 해결하는 것 외에도 가까운 장래에 구현할 계획인 몇 가지 기능이 있습니다.

오류 경계

후크 지지대 ( useFloodgate )

문서 웹사이트

README, 특히 "기고자"섹션 개선

GitHub에서 탐색

Floodgate는 GitHubgeoffdavis92/react-floodgate에서 사용할 수 있습니다. 여기에서 구성 요소의 README를 보고, 소스 파일을 검사하고, 문제를 제기하고, 열린 프로젝트를 살펴보고, 모든 일반적인 GitHub 리포지토리 작업을 수행할 수 있습니다.

어떻게 생각해?

플러드게이트 앱이 마음에 드시나요? 앱에 이 구성 요소가 절실히 필요합니까? 그것에 대해 알려주거나 아래에 의견을 남겨주세요!

🎉 행복한 발전! 🎉