Day 9 - 반응에서 ref는 무엇입니까?

반응에서 Refs는 부모 구성 요소 내에서 DOM 요소에 액세스하거나 참조하는 방법을 제공합니다. 일반적으로 반응에서는 구성 요소 간의 상호 작용에 소품을 사용합니다. 업데이트된 소품으로 구성 요소를 다시 렌더링하여 수정할 수 있습니다. Refs는 이 변경을 명령적으로 수행하는 방법을 제공합니다.

Refs는 언제 사용하나요?

반응 문서에 따르면,

포커스, 텍스트 선택 또는 미디어 재생을 관리합니다.

명령형 애니메이션을 수행합니다.

타사 DOM 라이브러리와 통합합니다.

Refs를 사용하지 말아야 하는 경우는 언제입니까?

우리는 선언적 프로그래밍 스타일을 위해 react와 같은 라이브러리를 사용합니다. 우리는 이것을 지정하거나 완료해야 하는 것을 지정하고 반응이 처리합니다. 그러나 심판이 우리에게 명령형 제어의 유연성을 제공할 때. 따라서 이것들을 남용해서는 안됩니다.

예시

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}