UseMoom을 사용하여 탄성 어셈블리 생성하기

오늘은 React에서 탄력적인 구성 요소를 만드는 원리를 이해하고useMemo 갈고리를 사용하여 유용한 사용자 정의 갈고리를 만들 것입니다.때때로, 구성 요소를 만들 때, 우리는 그것이 한 번만 사용될 것이라고 가정할 수 있다.
그러나 간단한 구성 요소를 다시 사용할 때 이러한 가설은 도구를 공유하는 문제를 초래할 수 있다.오늘의 예시에서, 우리는 어떻게 탄력적인 폼 구성 요소를 만드는지 연구할 것이다.

Sometimes we assume a certain component is only ever displayed once. Such as a navigation bar. This might be true for some time. However, this assumption often causes design problems that only surface much later. - Dan Abramov

전체 후속 코드here와 실제 프레젠테이션here을 볼 수 있습니다.

설정

우리는 우선create react app를 사용하여 프로젝트를 안내하고react 안내와shortid 패키지를 설치할 것입니다.이 프레젠테이션에서 저는 shortid 패키지를 사용하여 무작위로 생성된 유일한 ID를 만들 것입니다. 그러나 어떤 방법으로든 무작위 ID 문자열을 만들 수 있습니다.

npx create-react-app usememo-resilient-components;
cd usememo-resilient-components;
npm i react-boostrap shortid;
npm start;

react 부트에 CDN 링크가 포함되지 않으므로 부트 css 파일에 CDN 링크를 추가하는 것을 잊지 마십시오.react 안내 문서 here 에 따라 조작할 수 있습니다.

// index.html

...
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>
...

양식 프로세서 만들기

우리 먼저 우리 프로그램에 들어갑시다.js, 템플릿 파일을 정리하고 폼 프로세서를 만듭니다.우리는useState 갈고리를 사용하여 빈 대상을 설정하여 파라미터를 저장할 것입니다.모듈화를 극대화하기 위해, 우리의 폼 처리 함수에서, 우리는 setParams에 리셋을 전달할 것입니다. 이 setParams들은 필요에 따라 가능한 한 많은 폼 요소의 이름과 값 속성을 목표로 합니다.
또한react 가이드 패키지에서 가이드 요소를 가져오고 용기와 열을 현재 표시로 설정합니다.너의 응용.js는 다음과 같습니다.

// App.js

import { useState } from "react";
import { Container, Col } from "react-bootstrap";

function App() {
  const [params, setParams] = useState({});
  const handleChange = (e) => {
    const param = e.target.name;
    const value = e.target.value;
    setParams((prevParams) => {
      return { ...prevParams, [param]: value };
    });
  };

  return (
    <Container>
      <Col lg="5">
        <h1>Generate Unique IDs Demo</h1>
      </Col>
    </Container>
  );
}

export default App;

양식 작성 및 입력 표시

다음에 폼 구성 요소를 만들 것입니다.이 프레젠테이션에 대해react bootstrap에서 기본적인 두 요소 폼을 가져왔지만, 임의로 많은 폼 요소를 추가할 수 있습니다.우리의 구성 요소는 응용 프로그램의 도구로 처리 프로그램 함수에 전달될 것입니다.js에서 폼 onChange 속성을 처리합니다.

// InputForm.js

import { Form } from "react-bootstrap";

export default function InputForm({ handleChange }) {
  return (
    <Form className="mb-2">
      <Form.Group>
        <Form.Label>Email</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          name="email"
          onChange={handleChange}
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter Name"
          name="name
          onChange={handleChange}
        />
      </Form.Group>
    </Form>
  );
}

되돌아오는 파라미터가 어떤 상태에 있는지 보기 위해서, 우리는 그것들을 콘솔에 간단하게 기록할 수 있지만, 나는 이미 구성 요소를 만들어서, 이 프레젠테이션에 우리의 파라미터를 보여 준다.내 구성 요소는 프로그램에서 폼 프로세서가 전달하는 모든 파라미터를 비추는 것입니다.js가 Jumbotron 요소에 표시됩니다.

// DisplayInput.js

...

import React from "react";
import { Jumbotron } from "react-bootstrap";

export default function DisplayInput({ params }) {
  const paramKeys = Object.keys(params);
  return (
    <Jumbotron>
      {paramKeys.map((key) => {
        return <p key={key}>{key + ": " + params[key]}</p>;
      })}
    </Jumbotron>
  );
}

...

이제 이 두 요소를 응용 프로그램에 가져올 수 있습니다.js는 처리 프로그램을 폼 구성 요소에 전달하고 상태 파라미터를 디스플레이 구성 요소에 전달합니다.

// App.js
...

import DisplayInput from "./Components/DisplayInput";
import InputForm from "./Components/InputForm";

...

return (
  <Container>
    <Col lg="5">
      <h1>Generate Unique IDs Demo</h1>
      <InputForm handleChange={handleChange} />
      <DisplayInput params={params} />
    </Col>
  </Container>
);

...

npm start를 실행할 때 입력한 이름과 값이 Jumbotron에 표시되는 것을 볼 수 있을 것입니다.

문제.

같은 프로세서로 같은 폼 구성 요소를 다시 사용하려고 할 때 문제가 됩니다.우리 프로그램에서js, 폼 구성 요소를 다시 보여 줍니다.

// App.js

...

return (
  <Container>
    <Col lg="5">
      <h1>Generate Unique IDs Demo</h1>
      <InputForm handleChange={handleChange} />
      <InputForm handleChange={handleChange} />
      <DisplayInput params={params} />
    </Col>
  </Container>
);
...

다음 그림에서는 매개변수 prop이 두 양식 구성 요소에서 입력한 내용을 구분하지 않습니다.

우리는 단독 폼 처리 함수를 작성해서 이 문제를 해결할 수 있다.하지만 폼 구성 요소를 여러 번 사용하고 싶다고 가정하십시오.모든 폼에 전달할 단독 함수를 만들어야 합니다.

사용자 정의 UseMoom 갈고리 만들기

useMemo는react에 포함된 갈고리입니다. 기억된 값을 되돌려줍니다.이것은 의존항 하나가 변할 때만 촉발할 수 있다는 것을 의미한다.이는 전달된 값이 변하지 않으면 다시 렌더링할 때마다 비용이 많이 드는 방법을 다시 계산하지 않는다는 것을 의미한다.react hooks docshere에서 더 많은 정보를 얻을 수 있습니다.
새 디렉토리에서 사용자 정의useUniqueId를 만듭니다.js 갈고리 파일입니다.우리는 변수를 만들고 id 생성기 함수와 빈 그룹을 USEMO에 전달할 것입니다.useEffect와 연결된 것처럼 빈 그룹은 useMemo의 모든 구성 요소 렌더링이 한 번만 터치된다는 것을 알려 줍니다.마지막으로, 우리의 갈고리는 원소명 접미사를 가진 유일한 id를 되돌려줍니다.

// useUniqueId.js

...

import { useMemo } from "react";
const shortid = require("shortid");

const useUniqueId = () => {
  const uniqueId = useMemo(() => shortid.generate(), []);
  return (elementNameSuffix) => `${uniqueId}_${elementNameSuffix}`;
};

export default useUniqueId;

...

현재, 사용자 정의useUniqueId 갈고리를 폼 구성 요소로 가져와 폼 요소의name 속성에 전달할 수 있습니다.

// useUniqueId.js

...

import { Form } from "react-bootstrap";
import useUniqueId from "../helpers/useUniqueId";

export default function InputForm({ handleChange }) {
  const generateId = useUniqueId();
  return (
    <Form className="mb-2">
      <Form.Group>
        <Form.Label>Email</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          name={generateId("email")}
          onChange={handleChange}
        />
      </Form.Group>
      <Form.Group>
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter Name"
          name={generateId("name")}
          onChange={handleChange}
        />
      </Form.Group>
    </Form>
  );
}

...

마지막으로, 프로그램을 다시 실행하고 결과를 봅시다.

보시다시피, 현재 우리의 매개 변수는 서로 유일하게 구분할 수 있습니다. 우리가 폼 구성 요소를 몇 번을 렌더링하든지 상관없습니다.

축하합니다!!

이제 매개 변수가 분실되거나 겹쳐지지 않도록 폼 구성 요소를 여러 번 렌더링할 수 있습니다.우리의 맞춤형 갈고리는 모든 구성 요소에서 다시 사용하고자 하는 속성에 사용할 수 있습니다.
전체 코드here와 실제 프레젠테이션here을 볼 수 있습니다.