useRef - React Hooks

useRef 개념 설명

const ref = useRef(value);

함수형 컴포넌트에서 useRef를 부르면 ref object를 반환해줍니다.

ref object 란?

• { current: value } 형식으로 저장이 됩니다.
• 수정이 가능하기 때문에 언제든 원하는 값으로 바꿔줄 수 있다.
• 렌더링이 계속되어도 언 마운트 되기 전까지 값을 유지할 수 있다.

useRef의 용도

• 변수
  • 함수형 컴포넌트가 렌더링 된다는 것은 컴포넌트 내부 변수들이 초기화된다는 말입니다.
  • Ref의 값이 변화해도 렌더링이 되는 상황이 일어나지 않고, 렌더링이 일어나도 값이 초기화되지 않기 때문에 사용됩니다.
• 요소 접근
  
  • Ref를 사용하면 쉽게 input요소에 접근할 수 있게 됩니다. (마치 javascript의 Document.querySelector()와 비슷하게)
  • DOM요소에 접근해 여러 가지 작업을 할 수 있다.

DOM접근 사용법

일단 useRef 변수를 선언한뒤 원하는 요소의 속성값으로 "ref={ useRef변수 }"를 작성합니다. 이후 원하는 상황에 맞게 호출해서 사용합니다. 예를 들면 "useRef변수.current.함수();" 말이죠.

useRef와 useState의 차이점

useState는 값이 바뀔 때마다 렌더링 된다.

useRef는 값이 바뀌어도 렌더링 되지 않는다.

useRef를 사용해야 하는 이유

만약 변수가 꼭 렌더링 되어서 즉각 피드백을 줘야 하는 요소가 아니라면 굳이 필요 없는 렌더링을 할 필요는 없을 것입니다.

때문에 useRef를 사용해서 필요할 때에 렌더링 해서 요소를 업데이트한다면 성능이 좋아질 것입니다.

component 내부의 변수와 useRef의 차이점

component내부에서 var, let, const로 선언한 변수들은 렌더링 되면(함수를 다시 부르면) 변수 초기화가 발생합니다.

때문에 렌더링이 되더라도 값을 유지하고 싶을 수 있습니다.

useRef는 렌더링이 되어도 컴포넌트의 전 생애주기를 통해 유지가 되기 때문에 변수의 값이 유지됩니다.

useRef가 유용한 상황

useRef는 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안 되는 값을 다룰 때 편리하다.

 

결론

일반 변수사용하지 말고 변화를 감지하며 그 변화가 렌더링을 발생시키지도 않고 저장공간으로도 쓰이며, DOM요소에 접근하는 용도로도 쓰이는 useRef를 많이 사용하자입니다.