[React] - Hooks (useRef)

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,
     }]);
   };