React, ref

Aug 19, 2019


Ref 와 DOM

Ref 는 ‘render’ 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

필자는 div 태그 클릭 시, style 속성에 변화를 주기 위해 사용하려 한다.


일반적인 React의 데이터 플로우에서 ‘props’ 는 부모 컴포넌트가 자식과 상호작용 할 수 있는 유일한 수단이다. 자식을 수정하려면 새로운 props 를 전달하여 자식을 다시 렌더링해야 한다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트 일 수도 있다. React는 두 경우 모두를 위한 해결책을 제공한다.


Ref 를 사용해야 할 때

  • ‘focus’, ‘text’ 선택영역, 미디어 재생 관리.
  • 애니메이션을 직접적으로 실행.
  • 서드파티 DOM 라이브러리를 React와 같이 사용 할 때.


1. Ref 생성하기

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

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

2. Ref 에 접근하기

  • render 메서드 안에서 ref 가 엘리먼트에게 전달되었을 때, 그 노드를 향한 참조는 ref의 current 어트리뷰트에 담기게 된다.

    const node = this.myRef.current;