[ReactNative/Typescript] React Native Flatlist RenderItem에 type 지정하기

RN으로 개발하다보면 거의 필수적으로 쓰게되는 ScrollView와 FlatList.

그중 나는 FlatList를 사용하여 스크롤이 있는 UI에 배열로 들어오는 데이터들을 화면에 그려주곤 하는데,

RenderItem의 {item}에 타입을 지정해주기가 여간 까다로운게 아니다.

 

알고보니 이건 인수를 넣는 쪽에 타입을 지정해주려는 나의 습관과 고정관념의 문제였고

RN에서는 RenderItem에 타입을 지정해주는 아주 간단한 Type Props를 제공해준다.

 

import {FlatList, ListRenderItem} from 'react-native';
...

type TRenderItemProps = {
    a : string;
    b : number;
    ...
}
const RenderItem : ListRenderItem<IRenderItemProps> = useCallback(({item)=>{
	return (
    	...
    );
 }, []);

위와 같은 방법으로

ListRenderItem 을 Import 시켜주고

 

RenderItem을 선언할 때 ListRenderItem<타입명> 으로 해주면 된다.