개발자
혹시 컴포넌트에 제네릭 넘기신적 있으신분 계신가요? 예를 들면 A라는 컴포넌트가 OrderA OrderB라는 Order에서 파생된 두가지 타입을 받는 경우요!
답변 1
인기 답변
안녕하세요:) 제네릭으로 많이 사용합니다. 특히 UI 컴포넌트와 같은 공통 컴포넌트에서 자주 정의합니다. 예를들어 Select 컴포넌트가 있을 때, Select의 option값에 어떤 타입이 올지 모르는 경우 제네릭으로 정의 한 뒤 사용하는 쪽에서 타입을 넣어줍니다. 예시 코드 import React, { useState } from "react"; interface SelectProps<T> { options: T[]; value?: T; onChange: (value: T) => void; } function Select<T extends { label: string; value: string }>({ options, value, onChange, }: SelectProps<T>) { const [isOpen, setIsOpen] = useState(false); function handleOptionClick(option: T) { onChange(option); setIsOpen(false); } return ( <div> <button onClick={() => setIsOpen(!isOpen)}> {value ? value.label : "Select an option"} </button> {isOpen && ( <ul> {options.map((option) => ( <li key={option.value} onClick={() => handleOptionClick(option)}> {option.label} </li> ))} </ul> )} </div> ); } export default Select;
익명
작성자
2023년 03월 08일
답변 감사합니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!