React Function as a child or Render Props

아래 코드의 Cumsumer 사이에 중괄호를 넣어 함수를 넣어준 것 처럼 컴포넌트의 자식에 있어야할 자리에 JSX나 문자열이 아닌 함수를 전달하는 패턴을 "Function as a child" 또는 "Render Props" 라고 불린다.

const ColorBox = () => {
  return (
    <ColorContext.Consumer>
      {(value) => (
        <div
          style={{
            width: "64px",
            height: "64px",
            background: value.color,
          }}
        ></div>
      )}
    </ColorContext.Consumer>
  );
};