[React]리액트 훅(Hook)에 대해 알아보자! - 4 useRef

2022.01.24 - [Study/React,RN] - [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1

[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1

2022.01.25 - [Study/React,RN] - [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 2 UseState

[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 2 UseState

2022.01.28 - [Study/React,RN] - [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 3 useEffect

[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 2 useEffect

 

지난 3개의 포스팅에서 React Hook의 대표적인 useState, useEffect에 대해 다뤄봤는데,

오늘은 React에서 제공하는 Hook인 useRef에 대해 알아보자.

 

ref는 크게 2가지로 사용이 되는데,

 

- DOM에 접근할 때

- 렌더링을 일으키지 않고 값을 변경시킬 때

 

이다. 먼저 DOM(Document Object Model, 문서 객체 모델)에 접근할 때는,

Document.querySelector(), Document.getElementById() 등의 대표적인 방법이 있는데,

이것들 대신 ref를 이용하여 DOM에 접근할 수 있다.

 

렌더링을 일으키지 않고 값을 변경시키려고 할 때도 ref가 유용하게 사용된다.

만약 TextInput 등 state의 값이 변할 때마다 렌더링이 되는 것을 방지하기 위해서는,

useRef로 간단하게 처리할 수 있다.

 

값을 가져올 때만 ref.current를 이용하여 DOM에 접근해서 값을 가지고 오는 방식으로 사용하면 된다.