[React] useRef

daniel·2022년 6월 1일
0

[React]

목록 보기
11/12

The useRef Hook is a function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue).

uesRef 는 React 훅중의 하나로 ref Object를 반환하는데 이것은 컴포넌트가 죽기전까지 변하지 않는다.

다음 두가지가 useRef를 사용하는 주요 경우이다.

  1. DOM 혹은 React elements에 접근해야할 때
  2. 리렌더링이 일어나지 않는 변수를 원할때

Accessing the DOM nodes or React elements

특정 element에 접근하고싶을때 useRef를 사용하면된다.

예를들어
웹페이지가 실행되었을때 입력창에 커서가 선택되어있게 하려면 다음과같이 useRef를 이용하여 다음과 같이 ref 속성에 설정해주면된다.

Keeping a mutable variable which won't generate a re-render

변경시에도 리렌더링이 일어나지 않는 변수를 원한다면 useRef를 사용하면된다.

가장 유명한 예시로 setInterval 과같은 함수를 clear 시켜주기 위해선 useRef를 활용하여야한다. 만약 setInterval함수를 담을 변수를 ref의 current로 지정해주지 않는다면 state가 변할때마다 새로운 인터벌들이 생성될것이다. 이를 방지하기위해선 useRef의 를 활용하면된다.

profile
FE 개발 velog

0개의 댓글