Ref란?

Ref

 : render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법 제공

 

 - 일반적인 react에서는 부모 컴포넌트가 자식과 상호작용할 수 있는 수단은 props뿐!

 - 직접적으로 자식을 수정할 경우(react 컴포넌트의 인스턴스* || DOM 엘리먼트)

 

---

Ref를 사용해야 할 때

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

+ 선언적으로 해결되는 문제에서는 ref 사용 지양

 

Ref 생성

 - React.createRef()를 통해 생성

 - ref 어트리뷰트를 통해 엘리먼트에 부착

 

   + 최신 버전이 아닌 경우 콜백 ref 사용

 

Ref 값 유형

 1) HTML 엘리먼트에 사용된 경우

   : 자신을 전달받은 DOM 엘리먼트를 프로퍼티의 값으로 받음

       1) 마운트** 될 경우

           : DOM 엘리먼트 대입

       2) 마운트 해제될 경우

           : 프로퍼티를 null로 돌려놓음

       - ref 수정 작업은 componentDidMount || componentDidUpdate 생명주기 메서드 호출 전에 이루어짐

 

 2) 커스텀 클래스 컴포넌트에 사용된 경우

   : 마운트된 컴포넌트의 인스턴스를 프로퍼티의 값으로 받음

 

+ 함수 컴포넌트에서는 ref 어트리뷰트 사용 불가

  - 인스턴스가 존재하지 않기 때문

  - 예외 : DOM 엘리먼트나 클래스 컴포넌트의 인스턴스에 접근하기 위해 사용 가능

 

---

콜백 ref

 - 사용시 ref 어트리뷰트에 함수 전달

 - 컴포넌트의 인스턴스

     1) 마운트 될 경우

         : ref 콜백을 DOM 엘리먼트와 함께 호출

     2) 마운트 해제될 경우

         : ref 콜백을 null과 함께 호출

 - componentDidMount || componentDidUpdate가 호출되기 전에 호출됨

 - 다른 컴포넌트에 전달 가능

 

콜백 ref 주의사항

 - ref 콜백이 인라인 함수로 선언된 경우 업데이트 과정 중

      1) 처음 : null

      2) 그 다음 : DOM 엘리먼트

           -> 두번 호출

 - 매 렌더링마다 ref 콜백의 새 인스턴스가 생성됨

 

 -> ref 콜백을 클래스에 바인딩된 메서드로 선언하며 해결 가능

---

* 인스턴스

  : 실행 중인 임의의 프로세스, 클래스의 현재 생성된 오브젝트

 

** 마운트

  : 어떠한 것을 Available한 상태로 준비하는 것

 - DOM이 생성되고 웹 브라우저 상에 나타나는 것