개발자

리액트 컴포넌트 props를 제너릭으로 선언해서 사용해도 될까요?

2023년 03월 06일조회 224

혹시 컴포넌트에 제네릭 넘기신적 있으신분 계신가요? 예를 들면 A라는 컴포넌트가 OrderA OrderB라는 Order에서 파생된 두가지 타입을 받는 경우요!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 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;

profile picture

익명

작성자

2023년 03월 08일

답변 감사합니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!