[TIL] React FunctionComponent props generic 으로 받기

DropDown Component를 만들었고 props로 아래와 같은 인자를 받도록 만들었다. 

interface Props {
    items: Option[];
    color?: string;
    onSelectlist?: (key: string) => void;
}

const DropDown: FunctionComponent<Props> = ({
  items,
  color,
  selectlist,
}) => {
    const selectedItem = find(listItems, { selected: true });
    
    const changeKey = () => {
    	...
	if (selectedItem && selectlist) {
        	onSelectlist(selectedItem.key as T); 
    	}
        ...
    }
    
....    
}
    
export default DropDown;

onSelectlist 는 드랍다운 리스트의 한 요소를 클릭하여 해당 요소의 key 값을 상위 컴포넌트로 올려보내 주는 역할을 한다. 

여기서 key 값은 items props 의 key 값을 그대로 가지고 있어야 했기 때문에 key: string으로 정의해주면 타입이 맞지 않아 에러가 발생 하였다. 

 

그래서 key 값을 generic으로 받을 수 있도록 변경을 해주었다. 

ex) 상위에서 key 값이 "banana" | "apple" | "grape" 이면 이 값을 그대로 받도록 지정 

interface Props<T> {
    items: Option[];
    color?: string;
    onSelectlist?: (key: T) => void;
}

const DropDown = <T extends string>(props: Props<T> & { children?: ReactNode}) => {
    const selectedItem = find(listItems, { selected: true });
    
    const changeKey = () => {
    	...
	if (selectedItem && selectlist) {
            // selectlist 의 인자 key 가 T 이기 때문에 selectedItem.key 에 타입 어썰션을 사용하요 T 로 지정 
        	onSelectlist(selectedItem.key as T); 
    	}
        ...
    }
    
....    
}
    
export default DropDown;

functionComponent에서는 generic을 만들수 없다고한다. 

그래서 type annotation을 건너 뛰고 함수를 제네릭으로 만들고 props를 명시 적으로 입력 하는 방법을 사용해야 한다고 한다. 

위의 값에서 나는 children을 사용하지 않기 때문에 children 값을 제거 해주었다. 

 

 

 

 

참고 자료 : https://stackoverflow.com/questions/53958028/how-to-use-generics-in-props-in-react-in-a-functional-component

ㅊ