반응형 텍스트박스

5가지 방식으로 구현한 자동 줄바꿈 텍스트영역

핵심: useState + measureLines + debounce- 입력 값과 행 수를 상태로 관리하며, 캔버스 기반 측정으로 rows를 갱신

✅ 장점: 직관적, 상태 일원화, 테스트 용이, 성능 최적화, 메모리 누수 방지

❌ 단점: 복잡도 증가, 디바운스 지연

💡 사용 시나리오: 폼 검증, 외부 상태와 동기화가 필요한 경우, 성능이 중요한 경우

요약: 폼 검증·외부 상태 연동, 테스트가 중요하고 성능도 고려해야 한다면 이 방식이 적합합니다.

핵심: DOM owns value/rows + debounce - onInput 시점에만 measureLines로 계산해 elem.rows를 직접 갱신 (성능 최적화 적용)

✅ 장점: 렌더 비용 최소화, 간단함, 성능 최적화

❌ 단점: 상태 연동/검증이 어렵고 테스트 난이도↑, 디바운스 지연

💡 사용 시나리오: 단순 입력, 성능 우선, 로컬 DOM 제어

요약: 성능이 최우선이거나 단순 입력/로컬 DOM 제어가 목적이면 이 방식이 적합합니다.

핵심: clone textarea - 숨김 복제 요소로 scrollHeight/lineHeight를 측정해 rows 산출

✅ 장점: 캔버스 미사용, 렌더 스타일 기반 정확도↑

❌ 단점: DOM 2개 유지, 이벤트 바인딩 필요

💡 사용 시나리오: 스타일 영향이 큰 레이아웃 환경

핵심: document.createElement + addEventListener- React 없이 DOM API로 rows를 갱신

✅ 장점: 번들/오버헤드 최소, 프레임워크 독립

❌ 단점: 상태 연동/테스트 도구 부재, 보일러플레이트↑

💡 사용 시나리오: 순수 JS 예제, 성능/가벼움 우선

핵심: useImperativeHandle - 부모가 자식 컴포넌트의 내부 값에 직접 접근할 수 있도록 ref API 노출

✅ 장점: 특정 명령형 동작 간단, 폼 연동 유연

❌ 단점: 데이터 흐름이 분산되어 추적 어려움

💡 사용 시나리오: 외부 라이브러리 제어, 포커스/스크롤 등 명령형 제어가 필요한 경우