HOC = function(HOC의 매개변수)(컴포넌트) { return 새로운 컴포넌트 }

• Higher Order Component
• 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수
• HOC 함수는 특정 로직을 컴포넌트에서 재활용하기 위해 사용한다.
• HOC 함수의 인자로 들어간 컴포넌트 내부에서는 HOC 함수로부터 물려 받은 props 를 사용할 수 있다. 물려주는 그 props의 내용은 어떤 HOC 함수냐에 따라서 달라진다.
• HOC 함수는 새로운 컴포넌트를 반환하기 때문에 render 함수 안에서 쓰지 말아야 한다.

static 메소드

import hoistStatics from 'hoist-non-react-statics'

hoistStatics(새 컴포넌트, 기존 컴포넌트) // 기존 컴포넌트의 static 메소드를 새 컴포넌트에 포함

• 인자로 들어가는 컴포넌트의 static 메소드는, HOC 함수로부터 새롭게 반환되는 컴포넌트에 자동으로 포함되지 않기 때문에 hoist-non-react-statics 패키지를 통해서 새롭게 반환되는 컴포넌트에 기존 컴포넌트의 static 메소드를 포함시킬 수 있다.

forwardRef

// 상위 컴포넌트
const inputRef = useRef()

return (
	<MyInput ref={inputRef} />
)

// 하위 컴포넌트 MyInput
import { forwardRef } from 'react'
function MyInput(props, **ref**) {
	return (
		<input ref={ref} />
	)
}

export default **forwardRef**(MyInput)

• 상위 컴포넌트의 ref 를 하위 컴포넌트에게 물려줘서, 하위 컴포넌트에서 상위 컴포넌트의 태그를 제어하고 싶을 때 사용한다.
• 하지만 ref 객체는 하위 컴포넌트에게 props 형태로 물려줄 수 없는 개체이다.
• 따라서 forwardRef 함수를 통해서 ref 객체를 하위 컴포넌트에게 물려준다.
• forwardRef 는 HOC의 일종이다.
• forwardRef는 내부적으로 ref 를 가지고 있다.
• forwardRef HOC로 감싸진 컴포넌트는 그 컴포넌트 내부에서 forwardRef의 ref를 활용할 수 있다.