React - Ref

김용진·2022년 4월 26일
0

Ref는 render()에서 생성된 DOM node나 React element에 접근할 수 있게 해준다.

일반적인 React에서의 data flow에서는 부모 컴포넌트가 자식 컴포넌트들과 상호작용하기 위한 수단이 props로 한정되어있다. 따라서 자식 컴포넌트를 수정하려면 새로운 props를 전달해서 자식 컴포넌트를 다시 렌더링해야 한다.

하지만 가끔 자식 컴포넌트를 직접 수정해야 할 때가 있을 수 있다.

Ref의 바람직한 use case

focus, text 선택영역, 미디어 재생 관리
애니메이션을 직접적으로 실행시킬 때
third-party DOM 라이브러리를 React와 같이 사용할 때
(선언적으로 해결될 수 있는 문제에서는 ref사용을 지양한다.)

Ref 생성

Ref는 React.createRef()를 통해 생성되고, ref 어트리뷰트를 통해 React element에 부착된다.

Ref에 접근하기

render()안에서 ref가 element에게 전달되었을 때, 그 노드를 참조할 땐 ref의 current어트리뷰트로 접근한다.

const node = myRef.current;

ref의 값은 노드의 유형에 따라 다르다.

  • ref 어트리뷰트가 HTML element에 쓰였을 때:
    React.createRef()로 생성된 ref는 자신을 전달받은 DOM element 를 current 프로퍼티의 값으로 받는다.
  • ref 어트리뷰트가 커스텀 클래스 컴포넌트에 쓰였을 때:
    ref 객체는 마운트된 컴포넌트의 인스턴스를 current 프로퍼티의 값 으로 받는다.
  • 함수형 컴포넌트는 인스턴스가 없기 때문에 함수형 컴포넌트에 ref 어트 리뷰트를 사용할 수 없다.

함수형 컴포넌트에 ref를 사용할 수 있게 하려면, forwardRef를 쓰거나 클래스형 컴포넌트로 변경해야 한다.

profile
기획/개발/디자인 다 하고싶은 프론트엔드 개발자

0개의 댓글