AI 요약관련 정보

• useState는 리액트 컴포넌트에 데이터 상태 변수를 추가하고 관리하는 핵심 훅입니다. 💡
• use 접두사를 가진 함수들은 모두 훅이며, useState는 현재 데이터 상태를 유지하고 변경하는 데 사용됩니다. 🔄
• useState는 현재 상태 값과 상태를 업데이트하는 함수를 배열 형태로 반환하며, 배열 구조 분해 할당을 통해 사용됩니다. [state, setState] 📦
• 상태(state) 값이 이전 값과 다르게 변경될 때만 컴포넌트가 리렌더링되며, 이는 컴포넌트 함수 전체가 다시 실행됨을 의미합니다. 🚀
• useState로 관리되지 않는 변수나 함수는 리렌더링 시 매번 재평가되어 새로운 값을 가질 수 있습니다. 🎲
• 조건부 렌더링으로 컴포넌트가 DOM에서 제거되었다가 다시 추가되면, 해당 컴포넌트의 내부 상태는 초기화됩니다. 🗑️
• 하위 컴포넌트의 상태를 유지하려면, CSS display: none을 사용하거나, 상태를 부모 컴포넌트로 끌어올려 관리(State Lifting Up)해야 합니다. ⬆️
• TypeScript에서 useState는 제네릭을 지원하여 상태 변수의 타입을 명시하거나 초기값으로 추론할 수 있습니다. <T> 🏷️
• setState 함수는 새로운 값을 직접 전달하거나, 이전 상태를 인자로 받아 새 상태를 반환하는 함수 형태로 사용할 수 있습니다. ✍️
• setState 함수를 호출하더라도, 변경하려는 값이 현재 상태와 동일하다면 리액트는 불필요한 리렌더링을 최적화하여 건너뜁니다. ⚡