2025 React Master Class - 11강: useRef란 무엇인가?
useRef는 함수 컴포넌트에서 ref 속성을 쉽게 사용하도록 돕는 도구로, 컴포넌트 내에서 변하지 않는 값을 유지하거나 DOM 요소에 직접 접근할 때 활용됩니다. 🛠️
- 다른 React 훅과 달리,
useRef에 저장된 값은 컴포넌트가 리렌더링되어도 유지되며, 값의 변경이 리렌더링을 유발하지 않는다는 특징이 있습니다. 🔄
ref 속성은 JSX/TSX 파일에서 HTML 요소나 컴포넌트의 참조를 연결하는 역할을 수행합니다. 🔗
- 예시로, 등록 버튼 클릭 시 특정
input 태그에 포커스를 활성화하는 기능을 구현하여 useRef를 통한 DOM 요소 직접 조작 방법을 시연합니다. 🎯
- 또 다른 예시로,
type="file"인 input 태그를 useRef로 참조하여 버튼 클릭 시 파일 선택 창을 띄우는 기능을 구현, UI/UX 개선에 활용될 수 있음을 보여줍니다. 📂
useRef는 부모 컴포넌트에서 자식 컴포넌트를 제어하거나, 숨겨진 파일 입력 필드를 커스텀 버튼으로 트리거하는 등 사용자 경험을 향상시키는 데 실용적으로 사용될 수 있습니다. ✨