useRef는 리액트 네이티브에서 DOM 요소나 컴포넌트의 참조를 유지하기 위해 사용되는 훅이다. 주로 컴포넌트의 상태를 관리하는 대신에 불변의 값을 저장하고, 렌더링 사이에 데이터를 유지할 때 유용하다.
# 기본 사용법
1. 참조 생성: useRef를 호출하여 참조 객체를 생성한다. 이 객체는 .current 속성을 가진다. 초기값을 설정할 수 있는데, 기본값은 undefined이다.
const myRef = useRef(initialValue);2. DOM 요소에 할당: 생성한 참조를 특정 DOM 요소에 할당하여 그 요소에 접근할 수 있게 한다. 예를 들어, TextInput이나 View 컴포넌트에 ref 속성으로 전달한다.
<TextInput ref={myRef} />3. 참조 값 접근: .current 속성을 통해 참조된 DOM 요소나 값에 접근한다. 이를 통해 포커스를 주거나, 요소의 크기 등을 직접 제어할 수 있다.
myRef.current.focus();# 주의사항
- 렌더링에 영향 없음: useRef를 통해 저장한 값은 렌더링 사이에서 유지되지만, 값이 변경되어도 컴포넌트가 재렌더링되지 않는다. 따라서 상태를 관리하는 데는 적합하지 않다.
- 전역 상태 관리: useRef는 전역 상태 관리 도구와는 다르다. 상태를 공유해야 하는 경우에는 useContext나 상태 관리 라이브러리를 사용하는 것이 좋다.
# 활용 예시
1. 포커스 관리: 입력 필드에 포커스를 주기 위해 useRef를 활용할 수 있다.
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<>
<TextInput ref={inputRef} />
<Button title="Focus Input" onPress={focusInput} />
</>
);2. 타이머 관리: 타이머를 설정하고 해제할 때도 useRef를 사용할 수 있다.
const timerRef = useRef(null);
const startTimer = () => {
timerRef.current = setTimeout(() => {
console.log("타이머 완료");
}, 1000);
};
const stopTimer = () => {
clearTimeout(timerRef.current);
};3. 애니메이션 효과: 애니메이션을 제어하는 데도 사용된다. 특정 애니메이션의 현재 상태를 저장하고 이를 기반으로 업데이트할 수 있다.
# 결론
useRef는 리액트 네이티브에서 DOM 요소나 값에 대한 참조를 쉽게 관리할 수 있도록 돕는 유용한 훅이다. 다양한 상황에서 활용할 수 있으며, 특히 상태 관리와는 다른 용도로 사용해야 함을 유념해야 한다. 이를 통해 보다 효율적으로 컴포넌트를 구성할 수 있다.
'JavaScript > ReactNative' 카테고리의 다른 글
| Task 컴포넌트 정리 (0) | 2024.09.27 |
|---|---|
| IconButton 컴포넌트 정리 (0) | 2024.09.26 |
| input 컴포넌트 정리 (1) | 2024.09.25 |
| 리액트 네이티브 navigation 정리 (1) | 2024.09.17 |
| 리액트 네이티브 styled-components 정리 (0) | 2024.09.16 |