useState vs useRef - You’re Using the WRONG One
- useState는 React 컴포넌트에서 상태를 관리하고 UI를 업데이트하는 데 사용되며, 상태 변경 시 컴포넌트의 리렌더링을 유발합니다. 🔄
- useRef는 컴포넌트 전반에 걸쳐 지속적인 값을 저장하는 데 사용되지만, 값을 변경해도 컴포넌트가 리렌더링되지 않습니다. 📌
- useRef는 React의 렌더링 주기 외부에 존재하며, 상태 시스템과 독립적으로 작동합니다. 🧱
- useState와 useRef 모두 컴포넌트 리렌더링 시에도 값을 유지하지만, 일반 변수는 리렌더링될 때마다 초기화됩니다. 💾
- useRef 값은 useEffect, useMemo 등의 의존성 배열에 사용해도 아무런 반응을 일으키지 않습니다. 🚫
- useState의 setter 함수는 컴포넌트 본문 내에서 직접 호출할 수 없지만, useRef의 current 속성은 가능합니다. ⚠️
- useState의 setter 함수를 통한 상태 업데이트는 비동기적으로 처리되지만, useRef의 current 속성 변경은 동기적으로 즉시 반영됩니다. ⏱️
- 여러 상태가 동시에 변경되는 경우, 하나의 상태만 useState로 관리하고 나머지는 useRef로 관리하여 불필요한 리렌더링을 줄일 수 있습니다. 💡
- useRef는 DOM 요소에 직접 접근하거나, 컴포넌트의 이전 상태 값을 저장하는 데 유용하게 사용될 수 있습니다. 🖱️
- useState와 useRef의 적절한 사용은 React 애플리케이션의 성능을 최적화하는 데 중요한 역할을 합니다. 🚀