React - Dom과 컴포넌트에 접근하는 방법(Refs)

 

React에서는 Dom에 접근할때, document.querySelector 와 같은 api를 사용하지 않고

Ref를 이용한다!!

 

Ref 사용방법

Ref를 생성해서, 생성된 ref에 원하는 돔 엘리먼트를 저장

저장 후 this.(ref이름) 으로 사용.

아래 코드 참고!

 

--------------------------------------------------------------------------------------------

Class textForm extends Component {

 

  inputRef = React.createRef();   // Ref생성

 

  focusTextInput = () => {

    this.inputRef.current.focus();

  }

 

  render() {

    return (

      <div>

        <input type="text" ref={this.inputRef} />   //원하는 돔엘리먼트를 inputRef에 저장(연결)

        <input type="button" value="Focus the text input" onClick={this.focusTextInput} />

      </div>

    );

  }

 

}

--------------------------------------------------------------------------------------------

 

*** 컴포넌트가 마운트(장착)될 때 React는 current 프로퍼티에 DOM 엘리먼트를 대입하고,

컴포넌트의 마운트가 해제될 때 current 프로퍼티를 다시 null로 돌려 놓습니다. 

ref를 수정하는 작업은 componentDidMount 또는 componentDidUpdate 생명주기 메서드가 호출되기 전에 이루어집니다.

 

 

 

출처

ko.reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

 

---

 

클래스 컴포넌트에 ref 사용하기

 

--------------------------------------------------------------------------------------------

class AutoFocusTextInput extends React.Component {

  textInput = React.createRef();

 

  componentDidMount() {

    this.textInput.current.focusTextInput();      //컴포넌트의 함수를 직접적으로 사용

  }

  render() {

    return (

        <CustomTextInput ref={this.textInput} />    //컴포넌트를 ref에 저장

    );

  }

}

--------------------------------------------------------------------------------------------

 

 

출처

ko.reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

 

---

 

Ref 사용방법2 (콜백 ref)

Ref를 함수를 통해서 설정한다.

 

--------------------------------------------------------------------------------------------

Class textForm extends Component {

 

  inputRef = null;   // Ref로 사용될 변수 선언

 

  setInputRef = (element) => {

    this.textInput = element;

  }

  focusTextInput = () => {

    this.inputRef.focus();    //current 사용 안함  //this.inputRef.value

  }

 

  render() {

    return (

      <div>

        <input

            type="text"

            ref={this.setInputRef}    //해당 돔 엘리먼트를 파라미터로 받는 함수

            //ref={element => this.textInput = element}    //함수를 따로 선언하지 않고, 익명함수로 설정

         /> 

 

        <input type="button" value="Focus the text input" onClick={this.focusTextInput} />

      </div>

    );

  }

 

}

--------------------------------------------------------------------------------------------

 

 

출처

ko.reactjs.org/docs/refs-and-the-dom.html#callback-refs