[React] useRef

😀 useRef

import { useRef } from 'react';

const ref = useRef(0);

{ 
  current: 0 // The value you passed to useRef
}

ex) ref.current

 

 

1. useState는 상태의 값이 변경 시, 재렌더링을 하지만, useRef는 상태가 변경되어도, 렌더링 되지 않으며,

화면이 렌더링이 될때 useRef의 상태의 값이 변경된다. 

(useRef의 값이 변경되어도, 렌더링을 트리거하지않는다)

 

 

ex1) 버튼 클릭 시, useState의 상태값인 count의 숫자가 + 1 씩 올라간이후, count 텍스트가 변경된다.

const [count, setCount] = useState(0);

<div>{count}</div>
<button onClick={() => setCount(count + 1)}>COUNT</button>

 

ex2) useRef 상태 변경 시, 위의 useState 처럼 값이 변경되지 않는다.

const ref = useRef(0);

<div>{ref.current}</div>
<button onClick={() => ref.current++ }>COUNT</button>

 

ex3) 아래의 예제에서 ref의 버튼을 여러번 클릭 이후, useState의 버튼을 클릭하면, 화면이 재렌더링 되기 떄문에, useRef의 상태값이 변경된다.

const [count, setCount] = useState(0);
const ref = useRef(0);

//useState
<div>{count}</div>
<button onClick={() => setCount(count + 1)}>COUNT</button>

//useRef
<div>{ref.current}</div>
<button onClick={() => ref.current++ }>COUNT</button>

 

 

2. useRef를 사용 시, DOM 요소를 보유하는데 자주 사용된다.

 

Javascript를 사용하면 div의 상태를 변경하기위해서는 아래와 같이 DOM 요소를 불러와야했지만,

React의 useRef를 사용하면 DOM 요소를 가지고와 변경이 가능해진다.

 

ex) JS

const div = document.querySelector('.bg');

div.style.backgroundColor = "red";

 

ex) React -> useRef

const tgdiv = useRef(null);

<div className="bg" ref={tgdiv}>BG</div>
<button onClick={() => tgdiv.current.style.backgroundColor = "red"}>red</button>

 

 

https://react.dev/learn/manipulating-the-dom-with-refs

Manipulating the DOM with Refs – React