금붕어의 React 사전

Hook이란 무엇인가?

• 정의: React의 상태 관리 API
• Hook의 장점
• Hook의 규칙
• Hook의 원리

 

고차 컴포넌트 패턴 (HOC, Higher Order Component)이란?

• 기존의 컴포넌트를 다른 컴포넌트로 반환하는 것.
• 기존 컴포넌트를 child로 감싸서 관리하거나, 속성을 변환하는 등의 사용법 등이 있다.

const ComponentA = (props) => <div>props.count</div>

const withHOC = (component) => {
	const [num, setNum] = useState(10);
	
	return component({ count: num });
}

withHOC(ComponentA); // HOC

 

Render prop이란 무엇인가?

• 정의: 컴포넌트 내부에서 동적으로 출력할 내용을 ‘render’라는 이름을 가진 prop으로 전달하는 것.

function Container = ({ render }) => (<div>{render()}</div> 
function Item1 = () => (<p>abc</p>);
function Item2 = () => (<button>a</button>);

<Container render={Item1} 또는 render={<Item1 />} />
<Container render={Item2} 또는 render={<Item2 />} />