My Study/React
[React] - Hooks (useRef)
handbefore
2024. 10. 20. 01:59
useRef
[.current 프로퍼티로 전달된 인자(initialValue)로, 초기화된 변경 가능한 ref 객체를 반환.
반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됨]
- 순수 자바스크립트 객체를 반환 (.current라는 프로퍼티)
- 이 프로퍼티는 useRef를 실행할 때 전달한 초깃값이 구성되어 있다는 의미
- 매번 렌더링 할 때 동일한 ref 객체를 제공한다는 점
- 리렌더링 할 때 재선언되는 문제 해결 가능
- 값이 변경되더라도 컴포넌트 리렌더링 일어나지 않음
- 리액트에서 DOM에 직접 접근할 때 사용
import { useRef } from 'react';
const fakeId = useRef(0);
const handleCreate = (newProduct: Omit<ProductType, 'id'>) => {
fakeId.current += 1;
setProducts([...products, {
...newProduct,
id: fakeIdcurrent,
}]);
};