useRef

useRef

1. 값 참조
2. DOM 접근
3. ref 재생성 방지

---

Reason

이전 프로젝트에서 몇번 사용했었던 경험이 있었는데 당시 리엑트를 공부하다가 useRef를 남발하지 말라는 정보(?)를 보고 이후 부터 DOM접근시에는 계속 document.을 사용하고 있었는데, 코드를 줄일 방법을 찾아보다가 document ...이 연속으로 나열되어있는것을 보고 문뜩 "이전에 사용한 useRef를 다시 사용할까?" 라는 생각이 들어 이에대해 다시 공부를 해본다.

---

My Study

• useRef() creates a plain JavaScript object.
• 만들어진 객체는 해당 컴포넌트의 모든 라이프사이클 동안 유지된다.
• 애니메이션을 직접적으로 실행시킬 수 있다.
• 포커스, 텍스트 선택영역, 미티어 재생관리시 사용

리액트에서 DOM 조작은 왜 피하는 것이 좋을까요? 리액트는 Virtual DOM을 사용하기 때문에 DOM조작으로 인한 브라우저 렌더링을 최소화 한다는 장점을 가지고 있는데, 직접 DOM을 조작하게 된다면 이러한 리액트의 장점을 놓치게 되기 때문입니다. 따라서 가능하면 DOM을 직접 건드리는 일은 지양하는 것이 좋습니다. 원본

useRef의 사용아 나쁜것이 아닌 React에서의 DOM조작을 최소화 하자.

---

Usage

1. 값 참조

let A = useRef(17);

• 쉽게말해 저장소라고 생각하면된다.
• useState를 사용하면 state값이 변경 될때마다 랜더링을 발생시킨다.
• useRef를 사용하면 값에 변화를 줘도 랜더링을 발생시키지 않는다.
  => 화면의 변화는 없고 컴포넌트의 속성만 조회 & 수정한다.
• state 혹은 다른 요소로 인해 랜더링이 발생할 경우에 변동된 값으로 표시된다.

---

2. DOM 접근

let B = useRef();
.
.
.
<div ref={B}></div>

• element 속성의 ref에 지정하여 사용할 수 있다.

---

3. ref 재생성 방지

• 리랜더링시 재생성을 방지하는 방법
  React Docs

function Video() {
  const playerRef = useRef(new VideoPlayer());
  // ...

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...