제네릭을 사용하실 때 콤마

Question

제네릭을 사용하실 때 콤마는 제네릭과 JSX의 혼동방지 제네릭 구문을 명확히 해서 코드의 가독성 높임 TSX 파일에서 사용할 때 하는 일반적인 관례 로 인한 이유가 맞을까요?

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. oridori2705님 질문에 대한 답변 드리겠습니다. 제네릭 사용 시 콤마 () => { ... } 에 대한 질문을 주셨는데요, 그 이유는 주로 다음과 같습니다: 제네릭과 JSX의 혼동 방지 : TypeScript가 포함된 React(TSX) 파일에서, 제네릭의 꺾쇠 괄호( < > )가 JSX 태그와 혼동될 수 있습니다. 이를 방지하기 위해 제네릭 뒤에 콤마를 추가하여 명확하게 구문을 구분합니다. 제네릭 구문 명확성 : 여는 꺽쇠 괄호와 닫는 꺾쇠 괄호 사이에 추가적인 구분자가 있는 것은, TypeScript 컴파일러에게 현재 위치가 제네릭 타입 정의임을 명확히 알려주어 코드의 가독성을 높이고 오류를 줄여줍니다. 전달인자를 명료하게 표시 : 전통적으로 함수에 전달되는 것처럼, 제네릭 타입도 하나 이상의 타입 전달을 받을 수 있음을 명확히 하고, 이에 대한 해석 혼란을 줄입니다. 이미지를 통해 첨부된 내용이 제네릭 타입 매개 변수를 선언하는 올바른 구문이라는 점을 확인할 수 있습니다. TypeScript에서 콤마를 포함하는 패턴은 위에서 언급한 이유들과 관련이 깊죠. 관련된 개념 설명이나 예제 코드를 원하시면 JSX와 TypeScript 제네릭 혼동 해결을 위한 컴마 사용 방법 을 확인해 봐도 좋습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

jaenam · Answer

콤마가 없을 때 TSX에 대해 prettier나 biome, vscode typescript 등에서 문법 파싱을 제대로 하지 못해 오류로 표기되는 문제가 있습니다. 이를 피하기 위한 목적으로 부득이하게 넣은 것일 뿐입니다. TSX문법과의 혼동을 방지한다는 해석이 맞겠네요.