React 팁 — 구성 요소 구성 및 웹 구성 요소

4809 단어 reactprogrammingjavascriptwebdev
https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다. 이 기사에서는 React로 앱을 더 쉽게 빌드할 수 있는 몇 가지 팁과 트릭을 살펴보겠습니다.

구성 요소를 작게 유지



구성 요소를 작게 유지하여 쉽게 읽고, 변경하고, 테스트할 수 있습니다. 또한 디버그 및 유지 관리가 더 쉽습니다. 코드가 30줄이 넘습니다. 아마도 너무 클 것입니다.

부모와 자식인 경우 구성 요소 사이에 소품을 전달하여 구성 요소를 더 작은 구성 요소로 쉽게 나눌 수 있습니다.

관련이 없는 경우 Redux 또는 컨텍스트 API와 같은 상태 관리 솔루션을 사용할 수도 있습니다.

더 적은 작업을 수행하므로 더 많은 사용 사례에 적합하므로 재사용할 가능성이 더 큽니다.

예를 들어 다음은 작은 구성 요소입니다.

import React from "react";

export default function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div className="App">
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>{count}</p>
    </div>
  );
}


그것은 짧고 자체적으로 많은 것을 하지 않습니다.

너무 작은 구성요소 피하기



너무 작은 구성 요소도 문제입니다. 우리는 한 줄 또는 두 줄의 많은 구성 요소를 원하지 않습니다. 또한 모든 div, span 또는 단락이 자체 구성 요소가 되는 것을 원하지 않습니다.

props를 허용하여 재사용 가능하게 만들어야 합니다. 예를 들어 앱의 모든 곳에 다음과 같은 구성 요소가 있어서는 안 됩니다.

const Foo = <p>foo</p>;


React에서 웹 구성요소 사용하기



웹 구성 요소를 React 구성 요소에 직접 넣고 사용할 수 있습니다.

예를 들어 웹 구성 요소를 정의한 다음 다음과 같이 사용할 수 있습니다.

import React from "react";

class FooParagraph extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    const p = document.createElement("p");
    p.setAttribute("class", "wrapper");
    p.textContent = this.getAttribute("text");
    shadow.appendChild(p);
  }
}

customElements.define("foo-paragraph", FooParagraph);

export default function App() {
  return (
    <div className="App">
      <foo-paragraph text="abc" />
    </div>
  );
}


위의 코드에는 FooParagraph 웹 컴포넌트 클래스가 있습니다. 클래스 내부에는 connectedCallback 의 속성 값을 가져온 다음 text 값이 있는 p 태그를 shadow DOM에 추가하는 text가 있습니다.

그런 다음 customElements.define를 호출하여 새 웹 구성 요소를 정의합니다. 그런 다음 App React 구성 요소에 바로 넣습니다.

웹 컴포넌트에서 React 사용하기



다음과 같이 웹 구성 요소 내부에 React 구성 요소를 탑재하여 React로 웹 구성 요소를 만들 수도 있습니다.
src/index.js  :

import React from "react";
import ReactDOM from "react-dom";

class XParagraph extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement("div");
    this.attachShadow({ mode: "open" }).appendChild(mountPoint);

    const text = this.getAttribute("text");
    ReactDOM.render(<p>{text}</p>, mountPoint);
  }
}
customElements.define("x-paragraph", XParagraph);

index.html  :

<!DOCTYPE html>
<html>
  <head>
    <title>App</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <x-paragraph text="foo"></x-paragraph>
    <script src="src/index.js"></script>
  </body>
</html>


위의 코드는 Parcel로 생성된 프로젝트의 일부입니다. 따라서 스크립트에서 모듈을 사용할 수 있습니다.

웹 구성 요소의 속성에서 가져온 XParagraph 속성 값으로 p React 요소를 렌더링하는 ReactDOM.render 호출이 있는 text 웹 구성 요소가 있습니다.

그런 다음 요소 이름을 첫 번째 인수로 사용하여 customElements.define, 두 번째 인수로 HTMLElement 클래스를 사용하여 웹 구성 요소를 정의했습니다.
index.html 에서 x-paragraph 속성이 text로 설정된 foo 웹 구성요소를 추가하여 this.getAttribute('text')를 호출한 다음 반환된 값을 ReactDOM.render에 전달하여 요소 내부의 텍스트 콘텐츠를 표시합니다. )  .

따라서 화면에 'foo'라는 단어가 표시됩니다.

결론



개발, 테스트 및 코드 읽기를 쉽게 하려면 구성 요소를 작게 유지해야 합니다. 30줄 이하가 적당한 크기입니다.

그러나 너무 많은 것을 관리해야 하므로 1 또는 2줄처럼 너무 작아서는 안됩니다. 소품이 없으면 더욱 그렇습니다. 재사용 가능하도록 하려면 데이터를 공유하는 경우 소품을 사용하도록 해야 합니다.

React 구성 요소는 웹 구성 요소에 포함되어 React로 쉽게 재사용 가능한 웹 구성 요소를 생성할 수 있습니다.

또한 React 구성 요소에 웹 구성 요소를 포함하여 어디에서나 사용할 수 있는 표준 호환 사용자 정의 HTML 요소를 활용할 수 있습니다.
Spring Cloud Eureka의 서비스에 대한 상하선 모니터링(중점), 재계약, 등록, 시작 등
데이터 구조 - 중요 한 귀속 알고리즘

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage