[Nextjs] 공통 인터페이스를 이용해서 컴포넌트 생성하기
Dev/Nextjs
·
2024. 9. 25.
아이콘 Toggle 버튼이 아이콘만 다르고 구동방식이 동일하기때문에 리팩토링하여 공통 인터페이스와 로직을 공유하고 아이콘을 사용자 정의. 아이콘에 필요한 props(예: "켜짐" 및 "꺼짐" 상태의 아이콘 이름)를 허용하는 일반적인 ToggleButton 구성 요소를 만들면 코드 중복을 피하고 로직을 일관되게 유지할 수 있다.Step 1: 공유 인터페이스 및 구성 요소 만들기먼저 모든 공유 속성을 포함하는 공통 인터페이스 ToggleButtonProps를 정의하고 두 아이콘 이름(activeIcon 및 inactiveIcon)에 대한 props를 추가합니다.import { Icon } from "@/components/common/Icon";import { useEffect, useState } fro..