Generic in HOF(High Ordered Function)

// 1. HOF - 일반타입
// firstFunc의 리턴값의 형태는 number 형식의 arg2를 인자로 받고 [string, number] 형태의 결과 값을 리턴하는 형식의 함수 형식으로 그대로 써준다. >> (arg2: number) => [string, number]
function firstFunc1(arg1: string): (arg2: number) => [string, number]{
  //
  return function secondFUnct1(arg2: number): [string, number] {
    return [arg1, arg2]
  }
}

const result_1 = firstFunc1("영희")(1);

// 2. HOF - any타입
function firstFunc2(arg1: any) {
  return function secondFunc2(arg2: any): [any, any] {
    return [arg1, arg2];
  };
}
const result_2 = firstFunc2("철수")(8);

안전하지 않은 코드기 때문에, generic 형태로 바꿔준다.

// 3. HOF - generic타입
function firstFunc3<T, U>(arg1: T) {
  return function secondFunc3(arg2: U): [T, U] {
    return [arg1, arg2];
  };
}
const result_3 = firstFunc3("철수")(8);

3번 케이스를 화살표 함수로 바꿔주면,

// 4. HOF - generic타입 화살표함수
const firstFunc4 = <T>(arg1: T) => {
  return <U>(arg2: U): [T, U] => {
    return [arg1, arg2];
  };
}
const result_4 = firstFunc4("철수")(8);

그대로 HoC 에 적용하면 ->

// 5. HOF - generic타입 커뮤ㅗ넌트에 적용해보기(HOC, withAuth)
const withAuth = <C>(Component: C) => {
  return <P>(props: P): [C, P] => {
    return [Component, props];
  };
}
const result_5 = withAuth("Bbb")({qqq: "철수"});

전에 로그인 검증을 위해 만들었던 withAuth(본인건 isloggedIn)에 적용하자.