렌더 소품 이해

오늘 우리는 반응 구성 요소의 렌더링 소품과 구성 요소에서 사용하는 방법에 대해 이야기할 것입니다.

렌더링 소품은 반응 구성 요소 간에 코드를 공유하는 기술입니다. 렌더 소품을 사용함으로써 우리는 개발자가 구성 요소에 원하는 것을 표시할 수 있는 유연성을 제공할 수 있습니다.

Reacts의 기본 렌더링 소품은 children 소품입니다. 유연성 수준에서 children 소품을 사용하면 개발자가 구성 요소를 자유롭게 사용자 지정할 수 있습니다. 렌더 소품을 사용하면 머리글이나 바닥글과 같이 사용자 정의가 필요한 특정 영역에 사용할 수 있습니다.

JSX를 반환하는 것 외에도 상위 구성 요소에서 하위 구성 요소로 함수를 전달할 수도 있습니다. 아래에서 자식 구성 요소를 함수 렌더링 기능 소품으로 전달하는 방법을 자세히 살펴보겠습니다.

부모 구성 요소를 만드는 것으로 시작하고 해당 구성 요소 내에서 addCount 및 Minus Count와 같은 몇 가지 함수를 정의하고 개수를 추적하는 상태 값을 만듭니다.

Parent component 에 대한 return 문에서 children render prop 을 사용하고 children 이 함수인지 확인하고 함수이면 이러한 값(handleClick , addCount , minusCount 등)을 인수로 전달합니다. 상위 구성 요소의 하위 요소/구성 요소는 이러한 기능에 액세스할 수 있습니다.

//Parent.js
import React, { useState } from "react";

export const Parent = ({ children }) => {
  const [count, setCount] = useState(0);

  const addCount = () => {
    setCount(count + 1);
  };

  const minusCount = () => {
    setCount(count - 1);
  };
  const handleClick = () => {
    alert("button passed down");
  };

  return (
    <div>
      <h1>Parent wrapper</h1>
      {typeof children === "function"
        ? children({ handleClick, addCount, minusCount, count })
        : children}
    </div>
  );
};

그런 다음 부모 구성 요소 인수를 소품으로 사용할 자식 구성 요소를 만듭니다. 이 경우 아래에서 addCount 또는 minusCount 함수인 소품을 받는 Add 및 Minus 구성 요소를 만들었습니다.

소품의 기본값을 설정하는 것은 항상 좋은 습관입니다. 정의되지 않은 경우 해당 값은 기본값으로 설정됩니다(예: {openModal = false , addCount = () =>{}).

//addMinus.js
import React, { useState } from "react";

export const Add = ({ children, addCount = () => {} }) => {
  return (
    <div>
      <button onClick={addCount}>Add</button>
    </div>
  );
};

export const Minus = ({ children, minusCount = () => {} }) => {
  return (
    <div>
      <button onClick={minusCount}>Minus</button>
    </div>
  );
};

이제 렌더링 함수 소품을 실제로 사용하는 방법을 살펴보겠습니다. Parent 구성 요소 내에서 우리는 함수를 만들고, Parent 구성 요소의 아래 코드에서 자식이 함수인지 평가하고 Parent 구성 요소에 정의된 함수를 인수로 사용합니다.

//Parent.js
 {typeof children === "function"
        ? children({ handleClick, addCount, minusCount, count })
        : children}

이것이 우리가 addCount 및 minusCount를 prop으로 받는 Add 및 Minus 구성 요소를 사용하는 방법이며 해당 prop은 이 함수를 사용하여 count 값을 더하고 빼는 버튼을 반환합니다.

//App.js
import "./styles.css";
import { Add, Minus } from "./AddMinus";

import { Parent } from "./Parent";

export default function App() {
  return (
    <div className="App">
      <Parent>
        {({ addCount, count, minusCount }) => {
          return (
            <>
              <h1>{count}</h1>
              <Add addCount={addCount} />
              <Minus minusCount={minusCount} />
            </>
          );
        }}
      </Parent>
    </div>
  );
}

count 의 현재 상태를 표시하는 h1 태그, 클릭 시 addCount 및 minusCount 기능을 실행하는 Add 및 Minus 구성 요소가 다음과 같이 표시됩니다.



새로운 것을 배웠기를 바랍니다!