데브허브 | DEVHUB | [React] useState 란?
useState는 React의 훅 중 하나로, 사용자 인터랙션이나 외부 이벤트(웹소켓 메시지 등) 발생 시 React DOM이 화면을 업데이트하도록 알리는 데 사용됩니다. 🎣
- React는 라우터나 데이터 처리 기능 없이 오직 화면을 그리는 역할만 하는 "라이브러리"이며, 프레임워크가 아닌 이유가 여기에 있습니다. 🎨
- React DOM은 발생한 인터랙션을 이해하고 화면에 반영하기 위해 "상태(State)"를 활용하며, 이 상태는 Virtual DOM에 의해 관리됩니다. 🧠
useState를 호출하면 현재 상태 값과 상태를 업데이트하는 함수(setState) 두 가지를 반환합니다. 🔄
- 상태 값은
const로 선언되어 직접 변경할 수 없으며, 반드시 setState 함수를 통해서만 변경해야 합니다. 🔒
setState는 단순한 함수가 아닌 "액션"으로 불리는데, 이는 Virtual DOM에게 상태 변경을 알리고 화면 재렌더링을 요청하는 역할을 하기 때문입니다. 🚀
setState를 통해 상태가 변경되면, Virtual DOM은 이를 감지하여 효율적인 스로틀링(예: 16ms 단위)을 통해 화면을 다시 그려 사용자에게 반영합니다. ✨
- 결론적으로
useState는 React에서 가장 기본적인 상태 관리 메커니즘으로, UI를 동적으로 업데이트하는 핵심 도구입니다. 💡