useRef
React에서 DOM 요소나 효과를 저장하고 추천할 수 있는 Hook
사용하면, 구성 요소가 다시 연결되는 기본값이 캠핑이 되지 않고, DOM 요소 상태를 변경하지 않고 다른 값에 접근할 수 있다.
useRef의 주요 특징
- 리더링되지 않는다 : useRef에 저장된 값이 포함된 구성요소는 리렌더링되지 않는다.
- 침입자가 포함 되지 않은 경우 : 구성 요소가 리렌더링으로 인해 useRef저장되지 않은 값은 유지
- DOM 접근 : useRef는 DOM 요소에 직접 접근할 때 유용합니다. document.getElementById()대신 querySelector()에 사용할 수 있다.
문법
import React, {useRef} from 'react';
const refContainer = useRef(initialValue);
// ref(객체명) = useRef(초기값);
//ref(객체명).current: ref에 저장된 값을 참조합니다.
예시
1. DOM 요소에 접근하기
import React, { useRef } from 'react';
const InputFocus = () => {
const inputRef = useRef<HTMLInputElement>(null);
const focusInput = () => {
if (inputRef.current) {
inputRef.current.focus(); // input 요소에 포커스 설정
}
};
return (
<div>
<input ref={inputRef} type="text" placeholder="Enter text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};
export default InputFocus;요소 useRef를 사용하여 input접근하고, 버튼을 클릭하면 입력 요소에 포커스를 설정
2. 기본 유지(리렌더링 시 기본으로 인해 발생하지 않음)
import React, { useRef, useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const countRef = useRef(0);
const incrementCount = () => {
setCount(count + 1); // 상태 업데이트
countRef.current += 1; // ref 값 업데이트 (리렌더링과 무관)
};
return (
<div>
<p>State Count: {count}</p>
<p>Ref Count: {countRef.current}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
};
export default Counter;countRef가 리렌더링을 하지 않으며, 변경되지 않은 채로 가치가 있는 상태로 보관
useRef는 다음과 같은 DOM 요소를 참조하거나 리렌더링 사이에서도 상태를 유지하고 원하는 경우에 유용
'React' 카테고리의 다른 글
| 사이드이펙트 & useEffect() (0) | 2024.10.21 |
|---|---|
| Axios : 요청&응답 클라이언트 (0) | 2024.10.18 |
| React Router - SPA에서 다른 페이지 전환 (0) | 2024.10.16 |
| Redux - 편리한 상태관리 (0) | 2024.10.15 |
| React에서 CSS 적용하는 다양한 방법 (0) | 2024.10.14 |
