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

Ref이럴 때 사용하자

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

선언적으로 해결할 수 있는 것은 선언적으로 해결하자.

예

Dialog의 open(), close()를 두지말고 isOpen prop을 이용하자.

Ref를 남용하지 말자

ref를 통해 어떤 일이 일어나도록 할 수 있지만, 상태를 끌어올려서 해결할 수 있으면 해결하자.

Ref 생성하기

Ref는 React.createRef()메소드를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착한다.

Ref 접근하기

render메소드안에서 ref가 엘리먼트에게 전달됬다면 ref.current에 담기게 된다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

const node = this.myRef.current;

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

• DOM에 붙었다면 DOM 엘리먼트
• 커스텀 클래스 컴포넌트에 붙었다면 마운트 된 컴포넌트의 인스턴스
• 함수 컴포넌트는 사용 불가