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;
```