hof,hoc

HOC ==>

실행할컴포넌트보다 먼저 실행되는 컴포넌트.
이 컴포넌트에 useEffect라는 로직을 집어넣어 실행을 원하는 컴포넌트의 실행전 HOC컴포넌트의 useEffect가 먼저 실행되어 권한체크.

HOF ===>

함수 안에서 실행되는 함수

event.target.id 부분을 HOF방식으로 바꿔보자.
페이지 네이션실습폴더에서 실습진행

onClick={onClickPage(index+1)} 이렇게 바인딩하여보자

기존 onclick함수에 소괄호와 화살표를 하나 추가해준다
즉 함수 실행시 모양은 onClickPage(index+1)(event) 이런 모양이 된다.
콜백함수 모양!!

const onClickPage =
    (boardId: number) => async (event: MouseEvent<HTMLSpanElement>) => {
      await refetch({ page: boardId });
    };

onClick={onClickPage(index + startPage)}

아래쪽 onClick에 들어가는 소괄호 부분이 인자로, 위의 boardId라는 매개변수에 들어가 그것을 사용해준다.

event.target.id를 사용하는대신 HOF를 사용하면 혹시나 id가 중복될경우에 발생할 에러를 줄일 수 있다.

그렇다면 HOC는 어떻게 만드는가?

HOF에서 리턴으로 컴포넌트가 들어간다면 HOC라고 할 수 있다.

export default function Aaa(){
	return <Bbb aaa={"철수"}/>
    }

==>

export default function Aaa(){
	return <>{Bbb({qqq:"철수"})}</> ==> 함수로 바꾸는 방법
    }

여기에 검증부분넣고

아래는 실행부분

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

즉 검증부분에 먼저 실행할 컴포넌트인 HOC를 넣어주면 된다.

export default function Aaa(){
	return <>{HOC(Bbb)({qqq:"철수"})}</> ==> 여기가 최종적으로 실행되고,Bbb가
    }

Bbb가 여기 Component부분에 들어가고 props로 넘겨주는 qqq가 props로 들어간다. 
const HOC = (Component) => (props) =>{
		여기에 검증 즉 기존에 검증으로 넣어주었던 useEffect를 넣어준다.
        return <Component {...props}/> ==> props에 뭐가 들어올 지 모르니 스프레드 시켜 Bbb에 모두 넣는다고 표현
   }     

HOC에게서 props를 받음
export default function Bbb (props) {
	return<div>이름은{props.qqq}입니다</div>
  }  

{HOC(Bbb)({qqq:"철수"})} 이렇게 여기서 합치는 방법이 있고, 보내기전에 미리 합치는 방식이 있다.

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

{HOC(Bbb)({qqq:"철수"})} 이 부분과
export default HOC(Bbb) 이 부분은 동일하다

두번째 방식을 주로 사용하고, 내보내야할 컴포넌트 앞에 HOC을 붙여 import하여 사용한다.

보통 HOC의 이름은 with를 붙여주는 게 관례.

인증의 경우: withAuth(해당페이지 함수명)
그러면 소괄호안의 함수가 실행되기전에 HOF 여기서는 withAuth라는 이름의 HOF가 실행되어 검증을 거치게된다.