[React] 화살표 함수 제네릭 타입이 안된다!?!

사내 프로젝트를 진행중에 제네릭 타입을 사용 해야 할 일이 생겼다

그런데 제네릭 타입을 사용하니 에러 문구가 나왔다 

const getSortingClickHandler = <T>(header: Header<T, unknown>) => {
        return ...
    };

아무 문제가 없어야 하는 타입 정의 구문이어야 한다 허나 아래와 같은 에러 문구가 발생하였다

처음엔 해당 문구를 확인하지 못하고 

 const getSortingClickHandler: <T>(header: Header<T, unknown>) => (event: unknown) => void = (header) => {
		return ...
    }

위와 같이 작성하여 우회하였다 하지만 가독성이 너무 떨어져 고민을 하다

문득 처음 typeScript를 배우던 중 해당 문제를 겪었던 생각이 났다 해당 문제가 발생하는 이유는

 

1. tsx 파서가 < 를 jsx로 시도한다

2. tsx에선 "명확한 타입 문맥" 이 없으면 jsx가 우선시 된다 

3. 화살표 함수 + 제네릭 조합이 jsx와 겹치기에 발생된다

 

그러기에 해결을 하려면 4가지 방법이 있는데

 

1. 괄호를 감싸서 작성한다

2. arrowFunction이 아닌 일반 함수식을 사용한다

3. jsx가 아님을 명확히 한다 

4. <T ,> 를 활용해 제네릭 타입인걸 명시해준다

 

필자는 4번을 채택하여 

const getSortingClickHandler = <T,>(header: Header<T, unknown>) => {
        return ...
    };

이렇게 수정하였다.

 

삽질을 한 이유:

1. 오류 메세지를 제대로 확인하지 않았다.

2. 무작정 코드만 살펴보았다

3. 해당 문제를 검색 해보지 않았다.

 

해당 에러를 만나고 느낀점:

당장 에러 메세지부터 읽어보고 천천히 생각한 뒤 수정하는게 좋다고 생각했고 

해당 문제를 수정하고 나서는 굉장히 허탈했지만 이또한 다시 복기하며 앞으로 이런 일 이 없도록 하겠다.

 

그리고 필자를 포함하여 모든 신입,주니어 개발자들 화이팅이다.