findDOMNode ()에 대한 참조[Refs over findDOMNode()]

August 12, 2020 · View on GitHub

findDOMNode()를 통해 콜백 참조 사용

내용:

React는 또한 모든 컴포넌트의 ref prop으로 문자열 (콜백 대신)을 사용하는 것을 지원하지만, 이 접근 방식은 현재 대부분 레거시입니다.

findDOMNode(this)
이전:
class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }

  render() {
    return <div />;
  }
}
이후
class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }

  render() {
    return <div ref={(node) => (this.node = node)} />;
  }
}
findDOMNode(stringDOMRef)
이전
class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this.refs.something).scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref="something" />
      </div>
    );
  }
}
이후
class MyComponent extends Component {
  componentDidMount() {
    this.something.scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref={(node) => (this.something = node)} />
      </div>
    );
  }
}
findDOMNode(childComponentStringRef)
이전:
class Field extends Component {
  render() {
    return <input type="text" />;
  }
}

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this.refs.myInput).focus();
  }

  render() {
    return (
      <div>
        Hello,
        <Field ref="myInput" />
      </div>
    );
  }
}
이후
class Field extends Component {
  render() {
    return <input type="text" ref={this.props.inputRef} />;
  }
}

class MyComponent extends Component {
  componentDidMount() {
    this.inputNode.focus();
  }

  render() {
    return (
      <div>
        Hello,
        <Field inputRef={(node) => (this.inputNode = node)} />
      </div>
    );
  }
}