헷갈리는 useRef,forwardRef 공식문서 파헤치기 / React

Manipulating the DOM with Refs - ref로 dom 잘 다루기 공식문서
REACT - useRef 공식문서 바로가기

1. 리액트는 자동적으로 DOM을 비교해 렌더링하므로 자주 DOM에 접근해서 조작할 필요가 없다.
2. 하지만 node에 포커스, 스크롤, 사이즈를 재거나 위치를 잴 때 돔에 접근이 필요한데 이 기능이 리액트에 내장되어 있지 않아 DOM노드에 접근하기 위해선 ref가 필요하다.

WILL LEARN

• DOM노드에 어떻게 접근해서 관리할지
• ref가 어떻게 useRef와 연관되어 있는지
• 다른 컴포넌트의 DOM노드에 어떻게 접근할 수 있는지
• 리액트에의해 DOM이 안전하게 수정되는 경우들이 있는지

Getting a ref to the node

1. ref를 연결한다.

import {useRef} from 'react'

const example = () => {
const myRef = useREF(null)
return(
<div ref={myRef}></div>
)
}

2. useRef훅은 current라는 하나의 prop을 return한다. (최초의 ref.current는 null이다.)
3. 리액트가 DOM노드를 만들 때 이 ref.current에 레퍼런스를 생성할 것이다. 그러면 이 DOM노드에서는 이벤트 핸들러나 내장된 브라우저 api에 접근 할 수 있다.
4. 대부분의 보통의 ref조작 방법은 다른 것들을 리액트 밖에 저장해 놓을 수 있는 것이다.

Accessing another component's DOM nodes

중요! component에 ref로 접근하기

By default React does not let a component access the DOM nodes of other components. Not even for its own children!

수동으로 다른 컴포넌트에 조작하는것은 위험하다!
하나 이상의 children을 참조하기 위해선 그래서 forward를 사용해야 한다.

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

결국 useRef는 DOM노드를 조작하기 위한 것이고
컴포넌트에 접근할 때는 forwardRef를 사용해 ref를 넘겨주어야 한다.

-끗-