useRef란?
useRef란 어떠한 특정 DOM을 선택할 수 있게 해준다.
1. useRef() 는 일반적인 자바스크립트 객체입니다.
heap 영역에 저장되는 변수입니다.
2.매번 렌더링할 때 동일한 객체를 제공합니다.
heap에 저장되어 있기 때문에 어플리케이션이 종료되거나 가비지 컬렉팅될 때 까지, 참조할때마다 같은 메모리 값을 가진다고 할 수 있습니다.
3.값이 변경되어도 리렌더링이 되지 않습니다.
같은 메모리 주소를 갖고있기 때문에 자바스크립트의 === 연산이 항상 true 를 반환합니다. 즉 변경사항을 감지할 수 없어서 리렌더링을 하지 않는다는 뜻입니다.
사용법
const refContainer = useRef(initialValue);
- "useRef는 .current 프로퍼티로 전달된 인자 (initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애 주기를 통해 유지될 것이다 "-공식문서
useRef의 대표적인 3가지 사용법
1.특정 DOM 선택하기
-
1.JavaScript 를 사용할 때는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.
-
2.컴포넌트 안의 변수 만들기
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있습니다. -
3.리렌더링 방지하기
1.특정 DOM 선택하기
const nameinput = useref()
//useref로 객체를 생성
nameInput.current.focus();
//dom api를 이용
<input
name="name"
placeholder="이름"
onChange={onChange}
value={name}
ref={nameInput}
/>
//dom설정을 통해 dom에 직접 접근하기
->즉 여기가 dom인것! 헷갈렸다..2.컴포넌트 안의 변수 만들기
useRef() 를 사용할 때 파라미터를 넣어주면, 이 값이 .current값의 기본값이 됩니다. 그리고 이 값을 수정할 때는 .current값을 수정하면 되고 조회할 때는 .current를 조회하면 됩니다.
const nextId = useRef(4);
const onCreate = () => {
// 나중에 구현 할 배열에 항목 추가하는 로직
// ...
nextId.current += 1;
};3.리렌더링 방지하기
useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않으므로 리렌더링 방지에 활용할 수 있습니다.
왜 리렌더링이 안일어나는가는 참고자료중에서 확인한다 간단하게 말하자면 useref는 전역변수에 저장이 되기 때문에 마지막 값이 유지 될 수 있다
참고자료
예시들은 여기서보는것이 더좋을 거 같당
https://deeming.vercel.app/react/what-is-use-ref/
https://velog.io/@jminkyoung/TIL-13-React-Hooks-useRef-%EB%9E%80
