useRef

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.

반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.

본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다.

 

 

ref에서 current란 무엇인가? DOM의 요소정보를 가지고 있는 값

 

언제 사욯하나?

 

1. 특정 DOM 선택하기

리액트에서는 DOM 을 선택할 때 ref 를 사용합니다.

함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용합니다.

 

2. 컴포넌트 안의 변수 만들기

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다.

리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있습니다.

이 변수를 사용하여 다음과 같은 값을 관리할 수 있습니다.

• setTimeout, setInterval 을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치

3. 리렌더링 방지

컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 됩니다.

심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링 됩니다.

useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않으므로 리렌더링 방지에 활용할 수 있습니다.





useRef로 key(id)값관리는 다음과 같이 할 수 있다

const nextId = useRef(초기id값)
함수에서 nextId.current +=1
nextId.current값을 id로 사용

https://react.vlpt.us/basic/12-variable-with-useRef.html

12. useRef 로 useRef 로 컴포넌트 안의 변수 만들기 · GitBook

참고:

https://velog.io/@mnz/React-useRef-%EA%B0%9C%EB%85%90%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%EC%A7%80