📌 개요이번 작업은 Next.js 기반 앱에서 자녀별 학원비 통계 및 과목별 시각화를 구현하기 위한 컴포넌트를 개발하면서 겪은 과정, 문제 해결, 리팩토링에 대해 정리한 내용입니다.⚙️ 개발 환경Next.js (App Router) 기반 SSR/CSR 혼합 앱React 18, TypeScript, Emotion, Chart.js, Moment.js 사용모듈 구조는 다음과 같이 구성:├── components/│ ├── modules/│ │ └── modal/│ ├── webview/│ │ ├── academy-planner/ │ │ │ ├── tab/│ │ │ │ ├── AcademyReportChild.tsx│ │ ..

🧠 react-hook-form 작동 원리 간단 정리register()로 input을 등록register는 input을 react-hook-form의 내부 상태(formState)에 등록하고, value/validation/error 관리를 가능하게 해주는 핵심 함수입니다.input, select 같은 DOM 요소를 ref로 추적브라우저의 내장 폼 상태 (value, validity 등) 를 그대로 사용 → 리렌더링이 거의 없음→ 이 코드는 email이라는 필드를 내부 formState에 등록하면서, 필수 입력 조건을 체크하도록 합니다.useForm() 내부에서 필드 상태를 추적각 필드의 value, error, touched 상태 등을 formState로 관리 → formState는 폼의 에러, 제출..

☑️ 들어가며지금 작업 중인 Next.js App Router 기반 프로젝트에서, 여러 개의 모달(지출/수입 등록, 삭제 확인, 얼럿 등)을 확장 가능하게 만들고 싶어서 Redux와 type 기반 상태 관리를 활용한 범용 모달 시스템을 만들었다.이 글에서는 그 구조와 실제 구현 과정을 정리하려고 한다.☑️ 모달 구조 설계⭐ 구조 목표한 개의 CommonModal 컴포넌트로 다양한 모달 대응Redux 상태에서 모달의 type을 기준으로 열고 닫기modalProps 확장 여지도 확보1️⃣ modalSlice.ts 생성// features/modal/modalSlice.tsimport { createSlice } from "@reduxjs/toolkit";const initialState = { type: ..