React 19 Tutorial - 18 - useState Hook
- React의
useState 훅은 컴포넌트가 렌더링 간에 상태를 기억하고 UI 업데이트를 트리거하는 핵심 메커니즘을 제공합니다. 🔄
useState는 import { useState } from 'react'로 가져와 컴포넌트 내에서 const [state, setState] = useState(initialValue) 형태로 사용합니다. 🛠️
- 이 훅은 현재 상태 값과 해당 상태를 업데이트하는 함수를 배열 형태로 반환하며, 배열 구조 분해 할당을 통해 이름을 지정하는 것이 일반적입니다. 🎁
setState 함수를 호출하여 상태를 변경하면 React는 컴포넌트를 다시 렌더링하고 UI에 업데이트된 값을 표시하며, 상태는 렌더링 간에 유지됩니다. 🚀
useState에 초기 값 대신 함수를 전달하는 '게으른 초기화' 패턴은 컴포넌트의 초기 렌더링 시에만 호출되어 값비싼 계산을 최적화하는 데 유용합니다. 💡
- 불리언, 문자열 등 다양한 타입의 데이터를
useState로 관리할 수 있으며, 배열과 객체는 특별한 업데이트 규칙이 있습니다. 📊
- 동일한 컴포넌트의 여러 인스턴스는 각각 독립적인 로컬 상태를 가지므로, 한 인스턴스의 상태 변경이 다른 인스턴스에 영향을 주지 않습니다. 🏘️
- 상태 변수가
count라면, 세터 함수는 setCount와 같이 set 접두사와 상태 이름의 첫 글자를 대문자로 쓰는 명명 컨벤션을 따르는 것이 좋습니다. ✍️
데브허브 | DEVHUB | React 19 Tutorial - 18 - useState Hook