바퀴를 재발명하지 마세요! 또는 Vue 및 React 애플리케이션용 유틸리티 라이브러리

소개

부울 값 저장 및 관리, 누른 키 처리 또는 스테퍼 생성과 같은 표준 웹 애플리케이션 기능과 관련하여 많은 개발자는 종종 이 기능 또는 저 기능을 수행하는 방법을 찾으려고 노력하며 더 자주 다음을 수행하는 방법을 찾습니다. 기능을 처음부터 구현해 보세요.

바퀴를 재발명할 필요는 없습니다!

다양한 프레임워크(React, vue 등)에 재사용 가능한 함수 라이브러리의 제작자와 사용자는 이러한 접근 방식을 보고 이런 반응을 보입니다.

Vue의 경우 — 예를 들어 vueuse입니다. (vue 유틸리티 기능)

React의 경우 오늘날 가장 좋은 것은 새롭고 적극적으로 지원되는 Reactuse(React Hooks용)입니다

이 라이브러리는 어떤 문제를 해결합니까?

개발자의 삶을 덜 힘들게 만드는 데 필요합니다. 개발자가 작업에 필요할 수 있는 모든 가능한 기능을 미리 준비하십시오. 이미 만들어진 패키지를 사용한다면 최소한 시간을 절약할 수 있을 뿐 아니라 코드에서 발견된 오류나 버그가 발생할 확률도 최소화할 수 있을 것입니다. 왜냐하면 각 기능이 개별적으로 테스트되기 때문입니다. 사용 사례는 실제로 엄청납니다. 이러한 라이브러리의 도움으로 다음과 같은 작업을 수행할 수 있습니다.

1. 웹 소켓 사용
2. 질의하기
3. 사용자의 지리적 위치 감지
4. localStorage 사용
5. 모달 창을 쉽게 생성

그것은 가능한 모든 사례 중 극히 일부일 뿐입니다.

VueUse가 왜 멋진가요?

VueUse는 가장 인기 있는 vue 라이브러리 중 하나입니다. 결국 가장 기본적인 재사용 가능한 기능을 제공합니다. 어떤 사람들은 Vue 애플리케이션을 구축할 때 이것이 표준이라고 생각하고, 이것이 없으면 만드는 것이 불가능하다고 생각합니다. 동의하기 어렵습니다. 라이브러리는 200개가 넘는 기능으로 구성되어 있으며 위에서 설명한 이데올로기를 따릅니다.

React를 위한 최고의 대안

vueuse를 훌륭한 아이디어를 완벽하게 구현하는 가장 좋은 방법이라고 칭찬하면서도 최고의 js 라이브러리/프레임워크인 React를 잊어서는 안 됩니다. 그리고 여기서 상황은 더 불쾌했습니다. 결국, React를 위한 확립되고 신뢰할 수 있으며 광범위하고 유일한 라이브러리는 없습니다. 여러 개발자의 시도가 있었지만 그중 하나에는 후크가 너무 적고(React에서는 후크입니다.) 어딘가에 처리되지 않은 API를 사용하여 빌드된 후크가 있습니다.

상황을 개선하기 위해 vueuse의 대안으로 반응했지만 반응이 나왔습니다.

예를 들어 라이브러리의 도움과 바닐라 반응만을 사용하여 목록 관리를 만들어 보겠습니다.

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

Get value(배열 값), set(다른 배열 값을 할당하는 함수), push(배열에 값을 추가하는 함수), RemoveAt(인덱스별로 삭제), updateAt(인덱스별로 값 변경),clear(지우기) 배열), 재설정(기본값으로 재설정)
이제 바닐라 반응에서 이러한 모든 상태와 기능을 가져오는 코드는 다음과 같습니다.

const [value, setValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index + 1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

그리고 우리는 정확히 동일한 메소드와 상태를 얻습니다. 그리고 코드가 훨씬 더 작고 간단해졌습니다

라이브러리는 적극적으로 유지관리되고, 새로운 후크가 추가되고, 문서가 포함된 편리한 웹사이트가 있으며, 후크는 간단한 소스를 사용하고, 더 정교한 API를 갖추고 있습니다. 이제 80개 이상의 후크가 구현되었습니다. 또한 다른 곳에서는 본 적이 없는 완전히 새로운 구현이 있다는 점도 언급하고 싶습니다.

• usePaint — 그리기 위한 캔버스를 생성합니다. 캔버스를 설정하면 후크를 사용하여 캔버스에 그림을 그릴 수 있고 브러시 크기, 색상, 불투명도 및 "그리기" 또는 "지금 그리기" 상태를 조정할 수 있습니다
• useStopwatch — 스톱워치 생성용
• useEyeDropper — 색상 선택을 위해 스포이드를 사용합니다
• 사용자 장치 또는 브라우저 API(useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash 등)와 작동하는 엄청난 양의 후크

결론

이러한 라이브러리는 개발 표준이 되어야 합니다. 오래 전에 이미 발명된 작은 세부 사항에 집중할 수 없도록 하기 때문에 라이브러리를 가져와서 사용하면 됩니다.

반응 링크

npm — github

위 내용은 바퀴를 재발명하지 마세요! 또는 Vue 및 React 애플리케이션용 유틸리티 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!