React 공식문서 정리 - ref로 DOM 조작하기

https://react-ko.dev/learn/manipulating-the-dom-with-refs

 

명령형 핸들 (useImperativeHandle)

 

useImperativeHandle은 부모 컴포넌트에 대한 ref 값으로 고유한 특수 객체를 제공하도록 React에 지시한다. 

 

결과적으로 Form 컴포넌트 내부의 inputRef.current에는 focus 메서드만 존재한다.

부모컴포넌트에 DOM 기능을 선택적으로 제공할 수 있다. 

 

ref 조작은 DOM 노드가 아닌 useImperativeHandle() 내부에서 생성한 사용자 정의 객체이다. 

= ref에 할당된 것은 DOM 노드가 아니라 useImperativeHandle에서 생성한 사용자 정의 객체다.

 

일반적으로 렌더링 중에는 ref에 액세스하는 것을 원하지 않을 것입니다.

렌더링 중에는 ref.current를 읽거나 쓰지 마세요.

렌더링 중에 일부 정보가 필요한 경우, 대신 state를 사용하세요. React는 ref.current가 언제 변경되는지 알지 못하기 때문에, 렌더링 중에 읽어도 컴포넌트의 동작을 예측하기 어렵습니다. (유일한 예외는 첫 번째 렌더링 중에 ref를 한 번만 설정하는 if (!ref.current) ref.current = new Thing()과 같은 코드입니다)

 

=> 이는 React가 ref.current 값이 언제 변하는지 추적하지 못하기 때문입니다.

ref는 리렌더를 트리가하지 않으므로 변경을 추적할 수 없다!

 

=> 이는 ref 객체가 아직 초기화되지 않았을 때, 한 번만 값을 설정하기 때문에 예상치 못한 동작을 초래하지 않습니다.

 

ref에 값이 할당되는 시점은 커밋 페이즈이다. 

렌더 페이즈에서 컴포넌트 첫 렌더링은 DOM 생성되지 않았으므로 ref에 DOM 노드가 할당되지 않은 상태다.

DOM이 업데이트(리렌더링에 의해)된 직후 ref.current를 DOM 노드로 설정한다

 

이 과정에서 먼저 이전 DOM 노드와의 연결을 끊기 위해 ref.current를 null로 설정하고, 그 다음 새로운 DOM 노드에 연결하기 위해 ref.current를 해당 DOM 노드로 설정한다

 

React에서는 state 업데이트가 큐에 등록됩니다. 일반적으로 이것은 사용자가 원하는 것입니다. 그러나 여기서는 setTodos가 DOM을 즉시 업데이트하지 않기 때문에 문제가 발생합니다.

 

=> 컴포넌트가 렌더링되는 동안 상태 업데이트가 수행된다. 그러므로 DOM을 즉시 업데이트하지 않는다

 

flushSync라는 react-dom 기능이 있었네..?

=> flushSync로 감싼 코드가 실행된 직후 React가 DOM을 동기적으로 업데이트하도록 지시

 

Ref는 탈출구입니다. “React 외부로 나가야” 할 때만 사용해야 합니다

=> 리액트 컴포넌트의 라이프사이클에 벗어난 작업을 의미하는 것 같다.

=> 컴포넌트가 리렌더링되면 함수를 다시 호출하는 것이나 마찬가지이므로

이에 영향을 받지 않도록 동일한 참조를 고정적으로 사용하고 싶을 때 사용하자는 것 아닐까?

 

ref로 실제 DOM을 직접 조작하지 말아라!

 

 React가 이를 계속 올바르게 관리하는 방법을 모르기 때문입니다.

=> 무슨 말일까? 실제 DOM을 ref로 삭제하면 React는 DOM 트리의 변경사항을 모르고 있다. toggle with SetState 버튼을 클릭하면 show가 flase가 되어 p 노드를 제거해야하는데 이미 없는 상태이므로 에러 메시지가 발생한다.

 

• 보통은 포커스, 스크롤, DOM 엘리먼트 측정과 같은 비파괴적인 동작에 ref를 사용합니다.

비파괴적 동작이란 DOM 구조를 파괴하지 않는 동작을 말한다.