react의 hook useRef를 알아보자!

수민·2023년 2월 28일
0
post-thumbnail

Ref?

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.
리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다.
그럴때 react는 ref라는 것을 사용합니다

-> ref === React프로젝트 내에서 특정 DOM을 선택 해야할때 사용

useRef

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

useRef를 사용할 수 있는 상황들

  • 위에 설명했듯이, 특정 dom에 접근하여 사용할때에도 useRef를 통해 생성한 ref를 사용하지만 다른 한가지 용도가 더있다.
  • useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다.

-> 따라서
setTimeout, setInterval 을 통해서 만들어진 id
외부 라이브러리를 사용하여 생성된 인스턴스
scroll 위치
등과 같이 값이 변하지만 리렌더링이 되지 않았으면 하는 변수를 생성할때 사용할 수 있다.

profile
react 파먹기

0개의 댓글