[React] Ref란?

useRef의 Ref가 궁금해서 찾아보았다!

 Ref가 무엇일까? 

- reference의 준말, 참조•참고

 

- 일반적으로 HTML에서 DOM요소에 이름을 달 때는 id라는 고유값을 사용한다.
  리액트에서도 DOM요소에 이름을 붙이는 방법이 있는데 이를 ref라고 한다.

  Ref는 일반 객체이다.

- Ref를 console.log로 찍어보면 { current: null } current  프로퍼티 하나를 가진 객체가 찍힌다.
  리액트는 이 객체를 통해 DOM에 직접적인 접근을 가능하게 해준다.

 

 Ref는 왜 사용할까? 

- HTML에서 id는 유일해야하기 때문에 컴포넌트를 재사용한다면 중복될 가능성이 크다. 반면에 Ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.

 

 Ref는 언제 사용할까? 

- 리액트에서 state로만 해결할 수 없고, DOM을 반드시 직접 건드려야할 때 사용한다.

ex)

- 특정 input에 포커스 주기, 텍스트 선택 영역, 미디어 재생 관리, 스크롤 박스 조작, 애니메이션 직접 실행, 서드 파티 DOM 라이브러리를 리액트와 같이 사용할 때

 

- 위의 경우들을 비제어 컴포넌트를 제어할 때 라고 일축할 수 있을 것이다. 리액트 시스템 안에서 제어하지 않고, 순수 JS를 이용해 제어하는 컴포넌트를 비제어 컴포넌트라고 한다. 즉, 리액트가 제어하지 않는 컴포넌트이다. 비제어 컴포넌트를 순수 JS로 제어하기 위해서 DOM 요소를 담는 역할을 Ref가 하는 것이다.

 

- 선언적으로 해결될 수 있는 문제는 Ref 사용을 지양해야한다.

예를 들어, 컴포넌트에서 open()과 close()메서드를 두는 대신, isOpen이라는 prop을 전달하는 것이 더 좋은 방법이다.

 

 왜 current로 접근해야할까? 

createRef/useRef는 왜 객체를 반환하고 current 프로퍼티로 DOM 요소를 전달할까?

 

먼저 React가 가상 돔을 기반으로 작동하는 라이브러리라는 사실을 생각해봐야 한다.

컴포넌트가 마운트될때 React는 current 프로퍼티에 DOM 엘리먼트를 대입하고,
컴포넌트의 마운트가 해제될때 current 프로퍼티를 다시 null로 돌려놓는다.
수정하는 작업은 마운트 또는 업데이트 생명주기 메서드가 호출되기 전에 이루어진다.

- 실제 DOM에 React 노드가 렌더될 때가지 Ref가 가리키는 DOM 요소의 주소값은 확정된 것이 아니다.
  Ref에 접근할 수 있는 시점은 React노드가 실제로 DOM에 반영되는 시점부터이다.

 

- useref는 초깃값을 따로 설정할 수 있고 null값으로 해놓으면 라이프사이클상에서는 마운트 그 이전에는 null이 current 프로퍼티에 담긴다.

그리고 가상 DOM이 변경될 때 실제 DOM의 요소도 변경되는 경우가 있기 때문에 DOM이 업데이트되는 경우도 ref의 current 값이 변경되게 된다.
이처럼 유동적이기에 React는 객체를 반환해 current 프로퍼티의 값을 계속해서 수정하는 것이다.

 

 왜 DOM API를 쓰면 안될까? 

- Ref는 특정 DOM 요소를 가져올 때 더 신뢰할만하다.

라이프 사이클에 따라 DOM 요소를 가져오지 못하는 경우가 있는데, 이런 예측하지 못한 상황으로 인해 DOM 요소를 가져오지 못한다면 로직에 따라 큰 결함으로 이어질 수 있다.

 

- 컴포넌트가 하나가 아닌 여러 개가 생성되는 경우 id나 class로 특정해서 원하는 DOM 요소를 가져오는 것은 쉽지 않을 수 있다. DOM 요소를 특정할 수 있도록 관심 영역을 특정 컴포넌트로 제한하는 역할을 Ref가 할 수 있다.

 

 createRef? useRef? 

- ref는 current라는 키를 가지고 있는 객체로 생성된다. 이런 특별한 객체를 생성하는 것이 createRef 함수라고 이해하면 좋다. 이 함수는 파라미터로 초기 값을 받아서 current 값을 초기화한 후 ref를 반환한다.

따라서, 우리가 사용하는 ref는 모두 createRef를 통해 생성된 객체라고 할 수 있다.

 

- 함수형 컴포넌트를 사용하게 되면서, 우리는 컴포넌트 안에서 선언하고 생성한 객체나 변수가 렌더링 시마다 재생성되지 않도록 유지시켜야 한다. useRef는 바로 이런 역할을 하는 Hook이다.

내부적으로 ref 객체를 만들고, 이를 호출한 컴포넌트에서 매번 같은 ref 객체를 참조할 수 있도록 해주는 Hook 함수다.

결국 함수형 컴포넌트를 사용하는 대부분의 경우, useRef를 사용하면 된다.

 

 

 

 

 

 

---

참고자료

https://blog.leaphop.co.kr/blogs/35

React ref와 forwardRef 그리고 useImperativeHandle 제대로 알기

https://velog.io/@wnsaud9322/React%EC%9D%98%EB%AA%A8%EB%93%A0%EA%B2%83-Ref%EB%9E%80

[React의 모든것] Ref란?