Ref와 DOM

Ref와 DOM

Ref는 render 메서드에서 생성된 DOM 노드나 React Element에 접근하는 방법을 제공합니다.

Ref를 사용해야 할 때

Ref의 바람직한 사용사례입니다.

• 포커스, 텍스트 선택 영역, 미디어의 재생을 관리
• 애니메이션 직접 실행
• 서드 파티 DOM 라이브러리를 React와 같이 사용

선언적으로 해결할 수 있는 문제에 대해서는 Ref 사용을 지양해야 합니다.

Ref를 남용하지 마세요.

Ref는 애플리케이션에 어떤 일이 일어나게 할 때 사용됩니다. 대부분의 경우는 상태를 끌어올리는 것으로 해결이 됩니다.

Ref 생성하기

React.createRef를 통해 생성하거나 useRef를 통해 생성할 수 있습니다.

Ref에 접근하기

• Ref attribute가 HTML element로 쓰였다면, 생성자에서 React.createRef()로 생성된 Ref는 자신을 전달받은 DOM element를 current 프로퍼티의 값으로서 받습니다.
• Ref attribute가 Custom class component에 쓰였다면, Ref객체는 마운트된 컴포넌트의 인스턴스를 Current 프로퍼티의 값으로서 받습니다.
• 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 Ref 어트리뷰트를 사용할 수 없습니다.

Ref와 함수 컴포넌트

함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 Ref 어트리뷰트를 사용할 수 없습니다.

함수 컴포넌트에 Ref를 사용할 수 있도록 하려면, forwardRef를 사용해야 합니다.

단 클래스 컴포넌트의 인스턴스에 접근하는데는 문제가 없습니다.

부모 컴포넌트에게 DOM Ref를 공개하기

부모에서 자식의 DOM에 접근하는 경우는 권장되지 않지만 종종 유용합니다. 이땐 Ref forwarding을 통해서 자식에게 ref를 전달한 다음 해당 Ref를 조작하면 됩니다.

콜백 Ref

Ref가 설정되고 해제되는 상황을 다루는 콜백 Ref를 통해서 제어 가능합니다.

setInputRef = (element) => {
	this.textInput = element;
}

콜백 Ref에 관한 주의사항

Ref콜백이 인라인 함수로 선언된다면 업데이트 과정에서 null → DOM 엘리먼트로 됩니다. 매 렌더링마다 Ref 콜백의 새 인스턴스가 생성되므로 React가 이전의 Ref를 제거하고 새 Ref를 설정해야 하기 때문에 일어납니다.