데브허브 | DEVHUB | React 19 Tutorials - 17 - Introduction to StateReact 19 Tutorials - 17 - Introduction to State
- React 컴포넌트는 일반 변수 변경 시 UI를 자동으로 업데이트하지 못하며, 이는 화면 변화 없음 문제로 이어진다. 🔄
- 일반 변수는 컴포넌트가 다시 렌더링될 때마다 초기화되어 값이 유지되지 않는 문제가 있다. ♻️
- 'State'는 컴포넌트의 특별한 메모리로, 값이 변경되면 UI를 자동으로 다시 렌더링하고, 렌더링 간에도 값을 유지시켜 이 두 가지 문제를 해결한다. ✨
- State는 쇼핑 카트, 폼 입력, 모달 등 웹사이트의 모든 인터랙티브 기능을 구현하는 데 필수적이다. 🚀
- Props는 외부에서 전달되어 변경할 수 없는 인자 같은 데이터인 반면, State는 컴포넌트 내부에서 관리하고 변경할 수 있는 자체 메모리이다. 🎁
- 데이터가 시간에 따라 변해야 하거나, 데이터 변경 시 UI가 업데이트되어야 하거나, 렌더링 간에 데이터가 기억되어야 할 때 State가 필요하다. 🤔
- React는 'Hooks'라는 특별한 함수를 통해 State 관리를 쉽게 해주며, 가장 중요한 State 관리 훅은 'useState'이다. 🎣