[React]children prop

children prop이란

react의 prop중 하나로,
부모(상위) 컴포넌트 내부에서 자식(하위) 컴포넌트 정보에 접근할 때 사용되는 prop이다.
대표적으로 랜더링을 최적화 할 때 사용된다.

<ParentComponent>
	<ChildComponent/>
</ParantComponent>

const ParantComponent =(props) =>{
	return <>
    	{props.children}
    </>
}

---

랜더링 최적화

부모 컴포넌트가 리랜더 될 때, 자식 컴포넌트도 같이 리랜더된다.
이런 동작은 불필요한 리랜더를 발생시키기 때문에 성능 저하의 원인이 된다.
이 경우, React.memo와 children prop을 통해 불필요한 리랜더를 방지할 수 있다.

React.memo() - https://velog.io/@yopi27/ReactReact.memo

children prop -

import React,{useState} from 'react';

const ChildComponent = () =>{
	return <div>Hello World!</div>
}

const ParentComponent = ({children}) =>{
	return <div>
 		{children}
    </div>
}

const Container =() =>{
	return <div>
    	<ParentComponent>
        	<ChildComponent/> // <ChildComponent/>는 <ParentComponent>의 prop으로 전달된다.
        </ParentComponent>
    </div>
}

---

children prop사용 시 유의할 점

children prop은 매 렌더링마다 값이 달라지므로,
children을 prop으로 갖는 컴포넌트에는 React.memo가 적용되지 않고 항상 렌더링 된다.

---

참고한 자료: https://velog.io/@eunjin/React-PropTypes-쓰는-이유-방법