React 팁 및 요령 — 조각 및 오류 처리

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

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

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

반응 조각

React 구성 요소에 여러 루트 노드를 가질 수 없습니다. 그러나 React 조각을 루트 노드로 사용하여 구성 요소를 렌더링하지 않는 단일 루트 노드를 가질 수 있습니다.
React.Fragement 컴포넌트나 빈 태그로 React 프래그먼트를 참조할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

import React from "react";
`
export default function App() {
  return (
    <React.Fragment>
      <p>foo</p>
      <p>bar</p>
    </React.Fragment>
  );
}

또는:

import React from "react";
`
export default function App() {
  return (
    <>
      <p>foo</p>
      <p>bar</p>
    </>
  );
}

<React.Fragment>는 <>와 같습니다.  .

오류 경계를 사용하여 오류를 정상적으로 처리

오류 경계는 오류가 있을 때 표시되는 구성 요소입니다. componentDidCatch와 같은 특수 후크가 있어 오류 세부 정보를 검색하고 그에 따라 오류에 대한 작업을 수행합니다.

오류 경계 구성 요소가 작동하도록 오류를 던질 수 있는 구성 요소 주위에 오류 경계 구성 요소를 래핑합니다.

오류 경계 구성 요소는 항상 클래스 기반 구성 요소입니다. 이에 상응하는 기능 구성 요소가 없습니다.

예를 들어 오류 경계 구성 요소를 정의하고 다음과 같이 사용할 수 있습니다.

import React from "react";
`
function Foo() {
  throw new Error("error");
  return <div>foo</div>;
}
`
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }
  render() {
    if (this.state.hasError) {
      return <h1>Error occurred.</h1>;
    }
    return this.props.children;
  }
}
`
export default function App() {
  return (
    <ErrorBoundary>
      <Foo />
    </ErrorBoundary>
  );
}

위의 코드에서 우리는 ErrorBoundary 후크가 있는 componentDidCatch 구성 요소를 정의했습니다. 이 구성 요소는 발생한 오류와 함께 error 매개 변수를 사용하고 오류 정보가 포함된 info 개체를 사용합니다.

그런 다음 setState ~ hasError ~ true를 호출하여 오류 메시지를 렌더링합니다. this.props.children 구성 요소 안에 넣은 구성 요소를 표시하기 위해 오류가 없으면 ErrorBoundary를 반환합니다.

따라서 Foo  가 있는 경우 오류가 발생하면 Foo가 렌더링하기 전에 오류가 발생하므로 '오류 발생' 메시지를 표시합니다.

고차 컴포넌트

고차 구성 요소는 다른 구성 요소를 렌더링하는 구성 요소입니다. 고차 컴포넌트에 의해 수정된 컴포넌트를 생성하는 데 사용할 수 있기 때문에 유용합니다.

예를 들어, colorizeElement 값이 기본값인 구성 요소에 색상 소품을 적용하기 위해 blue 고차 구성 요소를 만들 수 있습니다. color 소품이 설정되면 내부에 전달하는 색상 소품의 값을 재정의합니다.

다음과 같이 생성하고 사용할 수 있습니다.

import React from "react";
`
const colorizeElement = Element => props => <Element color="blue" {...props} />;
`
const Foo = ({ color }) => {
  return <p style={{ color }}>foo</p>;
};
`
const ColoredFoo = colorizeElement(Foo);
`
export default function App() {
  return (
    <>
      <ColoredFoo color="red" />
      <ColoredFoo />
    </>
  );
}

위의 코드에는 ColoredFoo 고차 컴포넌트에서 생성한 colorizeElement 컴포넌트가 있습니다. 구성 요소에서 Element를 전달합니다. 이 구성 요소는 props를 매개 변수로 사용하여 새 함수를 반환하고 Element prop이 color로 설정된 'blue'를 반환합니다. 전달된 다른 소품에서.

그런 다음 App  에는 ColoredFoo 구성 요소가 있습니다. 하나는 색상 소품 세트가 있고 다른 하나는 그렇지 않습니다. 그러면 첫 번째는 빨간색이고 두 번째는 파란색입니다.

React DevTools

React 개발 도구는 Chrome 및 Firefox용 확장 프로그램이며 React 핵심 팀에서 유지 관리합니다. 구성 요소 내부에 있는 props 및 state 값을 검사할 수 있습니다.

우리는 결국 해결하기 어려운 버그와 문제에 부딪힐 것이므로 디버깅을 위한 편리한 도구입니다.

결론

오류 경계 및 고차 구성 요소는 각각 오류를 표시하고 구성 요소를 수정하는 데 유용합니다.

조각은 하나의 단일 루트 노드 내에서 여러 항목을 렌더링하는 데 유용합니다. HTML 요소 자체를 렌더링하지 않습니다.

React dev 도구는 디버깅을 위한 훌륭한 확장입니다.