TS-HOF

박경찬·2022년 9월 17일
0

이번에 할내용은 HOF!!!
HOF는 Higher Order Function 이라고 한다. 개념은 클로저로부터 확장된 개념이다.

HOF는 최종 return 값이 JSX인지 JSX가 아닌지로 구분한다.

사용하는 목적은 ???

특정 버튼을 클릭했을때 , id 값을 넘겨주기 위해 event.target.id 를 사용한다. 하지만 이는 고유한 id를 태그에 입력하게 되므로, 예기치 못하게 id가 중복되어 작성되는 경우에 오작동을 할 가능성이 있다. 이것을 방지하고 안전하게 코드 환경을 유지하고자 사용하는게 HOF이다.👆🏻

여기서 알아보고자 하는건 HOF가 아니라 Generic을 사용하여 HOF를 접했을때 어떤 상황들이 나오고 어떤 코드를 써야 햐는지 알아보기 위함이다.

	function firstFunc(arg1: string) {
  		return function secondFunc(arg2: number):[string, number] {
    			return [arg1, arg2];
  };
}

const funcResult = firstFunc("영희")(8);

일반 타입으로 인자값에 타입을 명시해줬다. 결과값도 예상할수 있다.

이번엔 Any 타입으로 해보자


function anyFunc(arg1: any) {
  return function secondFunc(arg2: any): [any, any] {
    return [arg1, arg2];
  };
}

const anyResult = anyFunc("파인애플")(8);

위 내용과 같이 결과값을 예상할수 없다.

Generic을 활용해 보자


function genericFunc<T>(arg1: T) {
  return function secondFunc<U>(arg2: U): [T, U] {
    return [arg1, arg2];
  };
}

const genericResult = genericFunc("파인애플")(8);

결과값을 예상할수 있다.

이번엔 응용을 해서 컴포넌트에 적용해보자.


export const withAuth =
  (Components: ComponentType) =><P extends {}>(props: P) => {
    const Router = useRouter();
    useEffect(() => {
      if (!localStorage.getItem("accessToken")) {
        alert("로그인을 먼저 해야합니다.");
        Router.push("23-04-login-check");
      }
    }, []);

    return <Components {...props} />;
  };

권한분기 테스트 코드를 들고 왔다.

props 부터 살펴보면 보지 않았던 extends{} 가 보인다?
이유는 props는 객체 형태로 계속 추가가 될수 있기 때문이다.

컴포넌트는 리엑트에서 컴포넌트 타입을 지원 해준다.

import { ComponentType } from "react";

임포트 해주자!

공부해보니 오늘은 응용 하는 거라 별 내용이 없다..

generic을 아마 접해보지 않은 사람도 있을거다 하지만 이글을 보고 나서 any를 쓰고 있다면 한번더 생각해봤으면 한다!! any타입은 코드를 안전하게 유지하기도 힘들고 예상할수 없는 오류가 발생하기도 한다! generic을 써도 오류가 생기기는 마찬가지다 하지만 내가 작성한 코드가 오류가 생기고 다른사람이 오류를 해결해야 한다면 이야기는 달라진다 유지보수가 조금더 편리해지고 안전하게 코드를 관리 할수 있기 때문에 타입스크립트를 사용하는 목적이기도 하다.

다음은 LocalStorage를 활용해서 장바구니를 만들어보자!

0개의 댓글