react

React Hook Form의 Controller를 감싸서 반복되는 설정을 줄이고 재사용성을 높이는 ControllerWrapper 컴포넌트를 소개합니다. 이 컴포넌트를 사용하면 다양한 입력 필드를 통합적으로 관리하고 유효성 검사도 쉽게 적용할 수 있습니다.1.1. ControllerWrapper란?ControllerWrapper는 react-hook-form의 Controller를 감싸서 보다 편리하게 사용할 수 있도록 만들어진 재사용 가능한 Form 컨트롤러 컴포넌트입니다. 🔹 주요 기능Controller의 공통 설정을 한 곳에 모아 관리다양한 입력 필드(input, select, textarea, DatePicker 등) 지원rules를 활용한 유효성 검사 적용 가능React.forwardRef를..

react-hook-form 에서 control 을 안쓰겠다고 고집스럽게 힘들게 register 작업을 다해놓고 커스덤 컴포넌트들을 만들다보니 짜즈응이 나서 결국 를 쓰는 방식으로 리팩토링 하는 중인데왜죠..? 이해는 안가는데 그냥..그런갑다 해야지 1. 반복문을 사용한 코드 (예제에서 사용한 방식)반복문을 사용하면 코드가 더 동적으로 변할 수 있으며, 여러 개의 체크박스를 간단하게 렌더링const interestsCheckOptions = [ { id: 'sports', label: 'Sports', value: 'sports' }, { id: 'music', label: 'Music', value: 'music' }, { id: 'art', label: 'Art', value: 'art' },..

1. 이슈1.1. 발생 환경 : Task App - Task, Label add, edit Dialog popup 으로  구성- 대부분의 경고메시지는 Toast 를 Layout 에 선언해 전역적으로 사용 중1.2. 발생 상황 Task Edit Dialog 에서 Submit 버튼을 클릭시 변경된 컨텐츠가 없어서 Toast 메세지를 띄우고 로직 중단되었는데 바닥Page 에서 rerendering 이 불필요하게 일어나는 상황1.3. 해결방안 useMemo 및 React.memo 를 활용하여 ToastProvider 최적화useMemo를 사용하여 ToastProvider에서 showToast 함수가 메모이제이션되도록 처리하면, ToastProvider 컴포넌트가 리렌더링될 때마다 새로운 함수가 생성되는 것을 방..

두 방법은 React 컴포넌트에서 타입을 정의하는 방식에 있어 약간의 차이가 있지만, 기능적인 차이는 매우 적습니다. 다만, 두 가지 접근 방식이 제공하는 유연성과 명시성의 차이를 이해하는 것이 중요합니다.1. React.FC vs React.ButtonHTMLAttributes1.1 React.FC (Functional Component):React.FC는 기본적으로 Functional Component를 위한 타입을 정의하는 도구입니다. **children**이 자동으로 포함되고, defaultProps 및 **propTypes**를 사용할 수 있는 장점이 있습니다. 하지만 일부 제약이 있으며, 더 명시적인 타입을 정의하려고 할 때 사용되지 않는 경우도 있습니다.1.2 React.ButtonHTMLA..

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

기본 셋팅 Nextjs + Typescript + Tailwind + storybook 내가 쓰고자하는 "Poppins" 폰트가 가변폰트가 아니라next/font/google 지원을 안하는거 같음다른공부들이 먼저인지라 스타일 입히는것보다 폰트는 가중치가 후순위기도폰트는 깡 global.css에서  import 해서  사용하고있었음 기존 import 버전global.css @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;1,300;1,500;1,600&display=swap');@tailwind base;@tailwind components;@tailwind utilities;.fonts-pop..