createRef, useRef의 차이

ref 란?
특정 dom을 잡아야 할때 사용한다. createRef와 useRef 두 방식으로 ref를 만들 수 있다.
class형 컴포넌트에서는 createRef를 통해 ref를 사용하고, 함수형 컴포넌트에서는 useRef를 사용한다.

createRef를 함수형 컴포넌트에서 사용할 경우 문제점
import React, { useState, createRef } from "react";

const App = () => {
const valueRef = createRef();
const [, setState] = useState();
return (

<div>
  값 : {valueRef.current}
  <button onClick={() => ((valueRef.current = 88), setState({}))}>
    증가
  </button>
</div>

);
};

export default App;
위의 코드를 보면 렌더링의 문제는 없지만, 증가 버튼을 클릭해도 이전 과 같이 88로 바뀌지 않는 다는 것을 볼 수 있다.

그 이유는 App 컴포넌트가 setState에 의해 리렌더링 되면 App 컴포넌트를 초기화 하고 다시 만든다. 그에 따라 createRef도 다시 실행되는데, 이 때 createRef에 의해 만들어진 값은 무조건 null로 다시 초기화 된다.

하지만 useRef로 만들어진 값은 함수가 리렌더링 되어도 ref가 null로 초기화 되지 않는다. 따라서 함수형에서는 useRef 클라스형에서는 createRef를 사용하자