[React] React.createRef() 에 대한 정리

[React] React.createRef() 에 대한 정리

createRef 정리하기

 

---

 

React 프로젝트 실무를 하면서 Ref를 많이 사용하였지만 세부적으로 학습한 적이 없었다. 

이번 포스팅에서 Ref에 관해서 공식 문서에서 공부한 내용을 바탕으로 정리해보려고 한다.

---

 

Ref는 언제 사용하는가?

Ref 관련 공식 문서에서는 다음과 같이 정의하고 있다.

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

 

 

React의 일반적인 Data Flow에서 부모와 자식 컴포넌트가 인터렉션 할 수 있는 유일한 수단은 props이다

(자식 컴포넌트를 수정 방법: 새로운 props를 전달 → 자식 컴포넌트 새롭게 렌더링)

 

하지만 일반적인 데이터 플로우가 아니라 자식 컴포넌트를 직접 수정해야되는 경우가 있다. (아래 예시 케이스 참고)

- Focus, 텍스트 선택 영역 혹은 미디어의 재생을 관리 할 때
- Animation을 직접적으로 실행시킬 때
- React에서 서드 파티 DOM 라이브러리를 같이 사용 할 때

 

Ref를 남용하지 말자

ref는 어플리케이션에서 특정 동작이 발생하게 사용될 수도 있다. 그럴 때는 Ref 사용에 앞서서, 어느 컴포넌트에서 state를 가지고 있어야하는지 신중하게 생각해보자. 

대부분의 경우, 상위 컴포넌트에서 state를 가지는게 맞다는 결론이 난다. (공식 문서 "상태 끌어올리기(Lifting State Up)" 가이드 참고)

 

Ref 사용법

Ref 생성 및 바인딩

Ref 는 React.createRef() 를 통해 생성, React 엘리먼트의 Ref attribute를 통해 바인딩 한다. 

(컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가)

 

Ref에 접근하기

생성된 Ref 객체에 접근하기

render 메서드 안에서 ref가 엘리먼트에게 전달되었을 때,

해당 Node를 가르키는 참조는 생성된 ref 객체의 current 프로퍼티에 저장된다.

 

이때 ref 값은 ref 어트리뷰트가 어떤 Node 유형에 쓰였는지에 따라 다르게 설정된다.

 

- ref 에 HTML 엘리먼트 할당 할 경우 → 자신을 전달받은 DOM 엘리먼트를 current 프로퍼티의 값으로 받는다.

- ref 에 커스텀 클래스 컴포넌트 할당 할 경우 → 마운트된 컴포넌트의 인스턴스를 current 프로퍼티의 값으로 받는다.

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

 

 

DOM 엘리먼트에 Ref 사용

DOM 노드를 참조하기 위해 ref 사용

HTML 엘리먼트에  ref 할당

React 라이프사이클 에 따른 ref 객체 변화
- 컴퍼넌트 마운트 될 때: ref.current 에 DOM 엘리먼트 할당
- 마운트 해제 될 때: ref.current 에 null 할당

 

즉, componentDidMount 또는 componentDidUpdate 메서드 호출되기 전에 변경

클래스형 컴포넌트에 ref 사용

클래스형 컴포넌트의 인스턴스를 참조하기 위해 ref 사용

CustomTextInput 컴포넌트의 인스턴스가 마운트 된 후, 즉시 포커스 처리를 위해

부모 컴포넌트에서 CustomTextInput 컴포넌트의 인스턴스에 직접 focusTextInput 메서드를 호출 할 수도 있다.

주의: ref는 대상이 되는 CustomTextInput 이 클래스형 컴포넌트일 때만 작동

 

반응형

Ref와 함수형 컴포넌트

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

함수형 컴포넌트 인스턴스에 ref 를 사용하려면, forwradRef(아마 useImperativeHandle 과 함께)를 사용해야 한다.

 

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

공식 문서에서는 자식 컴포넌트의 DOM 노드에 접근하는 것은 컴포넌트의 캡슐화를 파괴하기 때문에 권장하지 않는다.

하지만 위의 예시처럼 자식 컴포넌트의 DOM 노드에 포커스 하거나, 크기 또는 위치를 계산하는 일을 해야 할 경우 필요하다.

 

1. 자식 컴포넌트 인스턴스에 ref 할당하는 방법

위에서 알아본 것 처럼 자식 컴포넌트가 함수형 컴포넌트일 경우에는 사용할 수 없다는 한계가 있음

 

2. React 16.3 이후 버전일 경우 ref 전달하기 (forwarding ref)을 사용하는 것이 권장된다.

자세한 방법은 아래 포스팅 참고

[React] Forwarding Refs 로 refs 전달하기

 

3. React 16.2 이전 버전일 경우

props로 ref 객체를 전달하여, 자손 컴포넌트에 ref로 할당하는 방식으로 사용할 수 있다.

참고: https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509

 

 

이 포스팅은 React 공식 문서(Ref와 DOM)을 기반으로 작성하였습니다.

https://ko.reactjs.org/docs/refs-and-the-dom.html

Ref와 DOM – React