AI 요약관련 정보

• useState는 함수형 컴포넌트에서 상태를 관리하는 리액트 내장 훅으로, 초기값을 받아 현재 상태와 상태 변경 함수를 반환합니다. 🔄
• 클래스형 컴포넌트는 this.state를 통해 인스턴스 프로퍼티로 상태를 관리하며, 컴포넌트 생명주기에 따라 상태가 유지되거나 소멸됩니다. 🏛️
• 함수형 컴포넌트는 인스턴스 없이 렌더링 시마다 함수가 새로 실행되므로, 변수가 초기화되지 않고 상태를 유지하는 useState의 원리가 중요합니다. ♻️
• useState의 핵심 비밀은 자바스크립트 클로저를 활용하여, 외부 함수(컴포넌트)의 생명주기가 끝나도 내부 함수(setState)가 외부 변수(state)에 접근할 수 있도록 하는 것입니다. 🔐
• 컴포넌트 함수 내부에 state를 선언하면 렌더링마다 초기화되어 상태가 유지되지 않으므로, useState는 상태를 컴포넌트 외부의 '선반'과 같은 곳에 저장하여 지속성을 확보합니다. 📦
• 여러 개의 상태를 관리하기 위해 useState는 상태들을 배열에 저장하고, currentStateKey와 같은 인덱스를 통해 각 상태에 순서대로 접근합니다. 🔢
• '훅 규칙' (최상위에서만 호출, 반복문/조건문 사용 금지)은 리액트가 훅 호출 순서에 기반하여 상태를 식별하고 관리하기 때문에 발생하며, 이를 어기면 상태가 꼬일 수 있습니다. 🚦
• 실제 useState는 컴포넌트별 상태 분리, 리렌더링 로직, 배치 처리 등 더 복잡한 기능을 포함하지만, 외부 상태 저장 및 클로저를 통한 접근이라는 기본 원리는 동일합니다. ✨
• 리액트의 '마법'처럼 보이는 기능들은 결국 자바스크립트의 핵심 메커니즘 위에 구축된 것이며, 이를 이해하는 것이 리액트 학습에 큰 도움이 됩니다. 💡