Front-end 개발

1. Controlled vs Uncontrolled ComponentReact의 input은 크게 Controlled Component와 Uncontrolled Component로 나뉩니다.Controlled Componentvalue 속성을 state와 연결한 형태React의 상태(state)가 UI를 "완전히 제어"값 변경 시 onChange 이벤트로 상태를 업데이트해야 함import { useState } from "react";function ControlledInput() { const [text, setText] = useState(""); return ( setText(e.target.value)} /> );}✅ 이 방식은 React 철학에 맞고, 대부분의 경우 권장되는 ..

📌 제목React에서 상태가 갑자기 초기화되는 이유와 해결법 — 컴포넌트 리렌더링 문제 실습 예제📝 본문React에서 컴포넌트 상태가 갑자기 초기화되는 문제를 경험한 적이 있나요?보통 이는 리렌더링 구조나 상태 관리 패턴에서 발생하는 문제입니다.이번 글에서는 원인 분석, 실습 예제, 그리고 해결 방법까지 자세히 안내합니다.1️⃣ 상태 초기화가 발생하는 대표적인 이유컴포넌트가 재생성될 때 state 초기화부모 컴포넌트가 리렌더링되면, 자식 컴포넌트가 새로 마운트되며 상태 초기화Key 속성 변경에서 key가 바뀌면 React는 기존 컴포넌트를 버리고 새로 생성State를 변수로 직접 재할당useState 대신 일반 변수 사용 → 리렌더링 시 값 유지 안됨비동기 함수에서 잘못된 클로저 참조이전 렌더링의 상..