React Context를 사용하여 구성 요소 건조

프로그래밍에서 배관 작업은 작업을 수행하기 위해 수행해야 하는 작업입니다. 때때로 반복적이거나 일반적으로 제거하는 상용구처럼 보입니다. 또한 응용 프로그램의 서로 다른 계층을 연결하기 때문에 중요합니다. 이 게시물에서는 React 애플리케이션 내부 배관의 일반적인 예와 이를 수정하는 방법을 보여드리겠습니다.

꽤 표준적인 테이블 사이드바 레이아웃을 살펴보겠습니다.

<Table
  selectedProduct={product}
  products={products}
  onProductChange={handleProductChange}
/>
<Sidebar product={product} />

후크를 사용하지 않고 전체 프로젝트here를 찾을 수 있습니다(이 방법은 권장되지 않음).

테이블에는 제품 목록이 포함되어 있습니다. 그 중 하나를 클릭하면 사이드바에 제품의 세부 정보가 표시되고 클릭한 행이 강조 표시됩니다. Table 및 Sidebar 모두 선택한 product 에 대해 알아야 합니다.
Table 행을 강조 표시해야 합니다.

const Table = ({ selectedProduct, products, onProductChange }) => (
  <tbody>
    {products.map(currProduct => (
      <TableRow
        selected={isSelected(currProduct, selectedProduct)}
        key={currProduct.id}
        product={currProduct}
        onProductChange={onProductChange}
      />
    ))}
  </tbody>
);
export default Table;

및 Sidebar는 선택한 제품에 대한 추가 정보를 표시합니다.

const Sidebar = ({ product }) => (
  <div className="sidebar">
    <h3>{product.name}</h3>
    <p>ID: {product.id}</p>
    <p>SKU: {product.sku}</p>
  </div>
);
export default Sidebar;

나중에 몇 가지 섹션으로 사이드바를 확장하기로 결정했습니다.

const Sidebar = () => (
  <div className="sidebar">
    <DetailsPanel />
    <DimensionsPanel />
  </div>
);

응용 프로그램이 커짐에 따라 Sidebar 와 같은 래퍼 구성 요소를 만듭니다. 이러한 구성 요소는 즉시 사용하지 않고product 하위 구성 요소에만 전달합니다.

React.useContext

useContext 은 세 가지 기본 React 후크 중 하나입니다.

Contexts의 장점은 Context 값이 변경될 때 구독한 구성 요소가 자동으로 다시 렌더링된다는 것입니다. 테이블/사이드바 레이아웃은 이에 대한 이상적인 사용 사례처럼 들립니다.

컨텍스트 생성은 다음과 같이 간단합니다.

const TableContext = React.createContext();
export default TableContext;

구독하려면:

const value = React.useContext(TableContext);

<TableContext.Provider>를 사용하여 컨텍스트의 value를 설정합니다. 컨텍스트 값이 변경될 때 둘 다 업데이트되기를 원하기 때문에 Table 및 Sidebar 구성 요소를 모두 이 구성 요소로 래핑합니다.

<TableContext.Provider value={product}>
  <Table
    products={products}
    onProductChange={handleProductChange}
  />
  <Sidebar />
</TableContext.Provider>

이제 선택한 제품을 사이드바 구성 요소에 전달하는 대신 <TableContext.Provider> 의 현재 값으로 설정합니다. 마지막으로 컨텍스트 업데이트를 구독합니다Sidebar.

const Sidebar = () => {
  const product = React.useContext(TableContext);

  return (
    <>
      <h3>{product.name}</h3>
      <p>ID: {product.id}</p>
      <p>SKU: {product.sku}</p>
    </>
  );
}
export default Sidebar;

컨텍스트를 사용하면 Sidebar 구성 요소에서 제품 소품을 제거할 수 있습니다. 애플리케이션이 커짐에 따라 useContext의 실질적인 이점을 확인했습니다. 앞서 우리는 일부 개발 후 Sidebar가 어떻게 보이는지와 다양한 사이드바 패널이 현재 제품에 대한 참조를 필요로 하는 방법을 설명했습니다. React.useContext를 사용하면 여러 구성 요소 계층을 통해 이 선택 항목을 전달할 필요가 없습니다. 위의 Sidebar에서와 같이 각 패널의 제품 업데이트를 구독하므로 구성 요소가 단순화됩니다.

const Sidebar = () => (
  <div className="sidebar">
    <DetailsPanel />
    <DimensionsPanel />
  </div>
);

작동 중인 이 코드here를 참조하십시오.

동일한 개체를 여러 구성 요소에 전달하지 않는 또 다른 이점은 반복되는 PropTypes 선언을 피할 수 있다는 것입니다. "react PropTypes repeated"에 대한 인터넷 검색은 React 개발자가 자주 발생하는 문제처럼 보입니다. 위의 접근 방식을 사용하면 제품의 모양을 정의할 위치가 한 군데 남습니다.

const TableContext = React.createContext();
TableContext.Provider.propTypes = {
  value: PropTypes.shape({
    id: PropTypes.string,
    name: PropTypes.string,
    sku: PropTypes.string,
  }),
}
export default TableContext;

다른 시나리오에서 React Context가 유용하다고 생각했나요? 아래 댓글 섹션에서 여러분의 이야기를 들려주세요!

이 콘텐츠를 즐겼다면 다른 사람들과 공유하여 사랑을 보여주세요. 고맙습니다!

Samuel Sianipar에서 Unsplash이 만든 표지 사진 .