useState 초기화 함수는 직접 호출(괄호 사용)하지 않고 참조(함수 이름만)로 전달하여, 컴포넌트의 첫 렌더링 시에만 실행되도록 해야 불필요한 재실행을 방지합니다. 🚀
컴포넌트의 상태를 재설정할 때는 useEffect 대신 key prop을 사용하여 컴포넌트를 강제로 언마운트하고 새로 마운트함으로써 모든 내부 상태를 효율적으로 초기화할 수 있습니다. 🔑
key prop을 컴포넌트 내부에서 관리하도록 래핑하여, 해당 컴포넌트를 사용하는 개발자가 key를 일일이 기억하고 전달할 필요 없이 편리하게 상태 초기화 기능을 활용할 수 있습니다. 📦
이전 상태에 기반하여 상태를 업데이트할 때는 useState의 업데이터 함수(예: setCount(prev => prev + 1))를 사용하여, React의 배치 처리나 비동기 작업으로 인한 오래된(stale) 상태 문제를 방지하고 정확한 업데이트를 보장해야 합니다. 🔄
기존 상태나 props에서 파생될 수 있는 값(예: firstName과 lastName으로 만드는 fullName)은 별도의 useState로 관리하지 않고, 컴포넌트 렌더링 로직 내에서 직접 계산하여 코드의 복잡성을 줄이고 불필요한 리렌더링을 방지해야 합니다. 💡
비용이 많이 드는 파생 계산의 경우, React 19 이전에는 useMemo를 사용하여 메모이제이션했지만, React 19 컴파일러는 이를 자동으로 처리하여 성능을 최적화합니다. 🧠
(트랜스크립트가 중간에 끊겨 다섯 번째 실수인 "폼 상태 관리"에 대한 구체적인 내용과 해결책은 제공되지 않았습니다.) ✂️