React HOC vs HOF

HOC

• 정의
  Higher Order Component의 줄임말로, 상위에 있는 컴포넌트로 다른 컴포넌트보다 먼저 실행되는 컴포넌트

• 예시

export default function ComponentA(){
	return <>{Hoc(ComponentB)({name: "짱구"})}</>;
} 

export default function Hoc(Component){
	return function (props) {
    	return <Component {...props} />
    }
}

export default function ComponentB(){
	return <div>이름은 {props.name}입니다.</div>
}

HOC 함수의 매개변수 부분에 Component가 들어와있고, Component의 매개변수에 들어올 컴포넌트는 ComponentB가 된다.
HOC 함수에서 리턴되는 함수를 보면 리턴 함수의 매개변수로 props가 들어가 있고 해당 props에는 함수 호출시 넣어준 인자값인 {name:"짱구"}가 들어오게 된다.

** 내부에 컴포넌트가 없음에도 불구하고 컴포넌트를 리턴하는 이유는 클로저로 외부의 컴포넌트를 가지고올 수 있기 때문이다.

• 장점

1. id 중복현상을 방지할 수 있다.
2. 반복적인 코드를 재사용하는데 용이하다

• 단점

1. 동명의 props를 사용하거나 생성할 때 충돌이 발생한다.
2. 항상 함수로 감싸주어야 한다.
3. 정적타입언어(ex. typescript)를 사용할 때 타입 정의가 까다롭다

---

HOF

• 정의
  Higher Order Function의 줄임말로, 함수를 인자로 받고 함수를 반환하는 함수
  Curry와 Partial Application도 HOF의 일종이다.

• 예시

function fn(a){
	return function (b){
    	return function (a)
    }
}

• 특징

1. 함수 합성을 할 수 있기 때문에 한번에 여러가지 처리를 할 수 있는 형태의 함수를 리턴할 수 있다.

---

• HOC와 HOF의 차이점

1. HOC는 컴포넌트형태이고, HOF는 함수형태이다.
2. 따라서 HOC는 JSX를 리턴하고, HOF는 JSX를 리턴하지 않는다.