[React] 함수형(function, arrow) 컴포넌트에서 generic 사용하기

React에서 함수형 컴포넌트를 작성하는 방법은 두 가지가 있습니다. 첫 번째는 function 을 사용하여서 나타내는 방식이고 두 번째는 ECMA6 에 추가된 화살표 함수를 사용하는 방식입니다. 각각의 방식에서 generic을 어떻게 선언해야 하는지 알아보겠습니다.

 

1. function 키워드를 사용한 경우

interface Props<T> {
	value: T
}

function App<T extends {}>(prorps: Props<T>) {
	return <p>App</p>
}

export default App

 

2. Arrow function을 사용하는 경우

interface Props<T> {
	value: T
}

const App = <T extends {}>(props: Props<T>) => {
	return <p>App</p>;
}

export default App

이와 같은 방식으로 generic을 사용할 수 있다. 둘 모두 extends {} 을 사용하는 이유는 HTML tag라고 판단하여 오류가 나는 경우를 막기 위함입니다. 실제로 extends {} 를 제거하면 다음고 같은 오류가 나옵니다.

generic을 사용하여 컴포넌트를 만들었다면 이를 사용하는 방식은 다음과 같습니다.

<App<string> />