[react] DOM에 접근하기 : createRef와 useRef의 차이
in React
DOM에 접근하기 : createRef와 useRef의 차이
리액트에서 특정 DOM 요소에 접근하기 위해 ref를 사용한다.
createRef와 useRef 두 방식으로 ref를 만들 수 있다.
class형 컴포넌트에서는 createRef를 통해 ref를 사용한다.
class App extends React.Component {
componentDidMount() {
this.divRef = React.createRef();
}
render() {
return (
<div>
<div id="divR" ref={this.divRef}>
App, here
</div>
</div>
);
}
}
함수형 컴포넌트는 createRef와 useRef 둘다 사용한다.
import React, { useRef, useState } from "react";
function App() {
const [text, setText] = useState("");
const textRef = useRef(text);
const handleChange = (e) => {
setText(e.target.value);
textRef.current = e.target.value;
};
const handleSend = () => {
setTimeout(() => {
alert("시간 초과와 같은 비동기 작업에서 state :" + text);
alert(
"setTimeout이 진행 중 일때, handleChange로 state 값을 변경할 경우 : ref로 수동 업데이트" +
textRef.current
);
}, 3000);
};
return (
<>
<input value={text} onChange={handleChange} />
<button onClick={handleSend}>Send</button>
</>
);
}
export default App;
그러나 createRef를 함수형 컴포넌트에서 사용할 경우 문제점이 있다.
setState에 의해 리렌더링이 발생하면, 컴포넌트를 초기화 하고 다시 만드는데 그에 따라 createRef도 다시 실행된다.
이 때 createRef에 의해 만들어진 값은 무조건 null로 다시 초기화 된다.
그래서 함수혐 컴포넌트에서 리랜더링이 발생해도 ref의 current 값을 유지하기 위해 useRef hook이 만들어진 것이다.
useRef로 만들어진 값은 함수가 리렌더링 되어도 ref가 null로 초기화 되지 않는다. (즉 ref 값이 다시 재생성되지 않음)
