리액트 고차 컴포넌트(HOC), 고차 함수(HOF)

고차 함수

함수의 리턴 타입이 함수인 경우=함수를 반환하는 함수

function aaa(){
	console.log("저는 aaa예요")

	return function bbb(){
		console.log("저는 bbb예요")
	}
}

aaa()를 실행하면 bbb 함수가 반환된다.
'저는 bbb예요' 문장을 출력하려면 (=bbb함수 안에 있는 명령문을 실행하려면) aaa()()로 입력

<파라미터가 있는 경우>

// 함수 선언식
function aaa(apple){

	return function bbb(banana){
		console.log(banana)
		console.log(apple)
	}
}

aaa(2)(3)

// 실행 결과
// 2 => aaa에 넣은 인자값
// 3 => bbb에 넣은 인자값

<화살표 함수>

const aaa = (apple)=>{
	return (banana)=>{
				console.log(apple)
				console.log(banana)
		}
}

aaa(2)(3)

// 중괄호 생략도 가능
const aaa = (apple)=>(banana)=>{
				console.log(apple)
				console.log(banana)
}

고차 컴포넌트, 권한 분기

다른 컴포넌트보다 먼저 실행되는 컴포넌트로 부모-자식간의 관계가 아닌 컴포넌트에서 컴포넌트를 리턴하는 개념이다.(고차함수와 비슷)

예) 로그인이 필요한 api를 요청하기 전 localStorage에 액세스토큰이 있는지 검증하는 컴포넌트를 고차 컴포넌트로 분리할 수 있다.

import { useRouter } from "next/router";
import { useEffect } from "react";

export const withAuth = (Component) => (props) => {
  const router = useRouter();
  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인 후 이용 가능합니다.");
      router.push("/login");
    }
  }, []);
  return <Component {...props} />;
};

function LoginSuccessPage() {
  // ... 로그인이 필요한 api를 요청하는 작업 (예: fetch)
  return (
    <div>로그인 성공 페이지</div>
  );
}
export default withAuth(LoginSuccessPage);

이렇게 분리하면 로그인이 된 상태와 로그인이 되지 않은 상태에서 컴포넌트를 다르게 보여줄 수 있다.
(=권한 분기)