useRef()란?

useRef로 컴포넌트 안의 변수 만들기

컴포넌트에서 특정 DOM을 선택할 때 ref 를 사용해야 합니다.

함수형 컴포넌트에서는 이를 설정 할 때 useRef() 를 사용하여 설정합니다.

useRef Hook은 DOM을 선택하는 용도 외에도, 다른 용도가 한가지 더 있습니다.

• 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 입니다.

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

일반 컴포넌트의 상태변수와 차이점은 ?

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

다음 값을 관리할 수 있습니다.

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

useRef() 를 사용 할 때 파라미터를 넣어주면 이 값이 .current 값의 기본값이 됩니다.

수정과 조회 역시 .current 를 통하여 수정과 조회를 하면 됩니다.