prop과 children을 반응으로 렌더링

렌더 소품

안녕하세요 여러분, render prop이 무엇인지 소개하려고 합니다.

공식 문서에 따르면

“렌더링 소품”이라는 용어는 값이 함수인 소품을 사용하여 React 구성 요소 간에 코드를 공유하는 기술을 나타냅니다.

내 관점에서 그것은 단지 또 다른 소품이지만 일부 코드를 공유하지만 소품으로 원하는 이름을 지정할 수 있습니다.

예를 들면,

import "./styles.css";
import ListItem from "./ListItem";

export default function App() {
  return (
    <div className="App">
      <ListItem render={"Simply a prop"} />

    </div>
  );
}

출력은



전통적으로 다음과 같은 방식으로 사용되었습니다.

In App.js
<ListItem render={(data) => <li>{data}</li>}  data="Simply a prop"/>

In ListItem.js
const ListItem = (props) => {
  return <div> {props.render(props.data)}</div>;
};

출력은



나는 그것이 render prop으로 당신의 의심을 해결한다고 생각합니다.

어린이 소품

children 소품은 요소 사이에 렌더링된 UI일 뿐입니다. 그게 무슨 뜻이야? 많은 코드를 작성하는 사이에 div가 있다고 가정해 보겠습니다. 해당 div 사이에 작성한 모든 코드는 해당 div의 하위입니다.

구성 요소에 대해 동일한 논리를 적용합니다.

예를 들어 동일한 ListItem 구성 요소를 고려하십시오.

//In App.js

<ListItem> <div>Hello Guys , this is considered as the children </div> </ListItem>

//In ListItem.js

const ListItem = (props) => {
  return <div> {props.children}</div>;
};

출력은



이 예제를 시도하고 의심이 있으면 의견을 말해야 한다고 생각합니다. 즐거운 코딩하세요.