React Refs

1.REACT REF란?

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

 

일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단입니다.

 

자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 합니다.

 

그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔씩 있습니다.

 

수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있습니다.

 

React는 두 경우 모두를 위한 해결책을 제공합니다.

2.REF를 사용해야 할 때

 

Ref의 바람직한 사용 사례는 다음과 같습니다.

 

포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.

 

애니메이션을 직접적으로 실행시킬 때.

 

서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

 

선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양하세요.

 

예를 들어, Dialog 컴포넌트에서 open()과 close() 메서드를 두는 대신, isOpen이라는 prop을 넘겨주세요.

 

참고-https://ko.reactjs.org/docs/refs-and-the-dom.html

 

3.예제

mport React from 'react';

class ImageCard extends React.Component {
  constructor(props) {
    super(props);

    this.imageRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.imageRef);
    console.log(this.imageRef.current.clientHeight);
  }

  render() {
    const { description, urls } = this.props.image;

    return (
      <div>
        <img ref={this.imageRef} alt={description} src={urls.regular} />
      </div>
    );
  }
}

export default ImageCard;