ref - MoonGyeongHyeon/React_Study GitHub Wiki

ref는 reference를 의미하며, DOM 요소에 이름을 달아준다. HTML의 id와 비슷하지만, id는 일반 DOM 요소에 특정 DOM 메소드만 사용할 수 있는 반면, ref는 DOM 요소에 사용할 수 있을 뿐만 아니라 컴포넌트에서도 사용할 수 있고, 해당 컴포넌트가 가지고 있는 메소드와 변수들을 사용할 수 있다는 큰 차이가 있다.

ref는 아무 곳에서나 자주 사용하는 건 권장하지 않는다. 비록 ref를 사용하는 게 가끔 코드를 간결하게 짤 수 있도록 해주지만, state와 props로 해결할 수 있는 부분에선 ref를 사용하지 않고, 해결할 수 없는 부분에서만 ref를 사용하는 게 유지보수에 좋은 방향이다.

1. 컴포넌트에 의해 렌더링 된 DOM에 직접 어떠한 처리를 해야할 경우.
2. 큰 프로젝트에 React 컴포넌트를 사용하는 경우(다른 프레임워크와 혼용).

ref를 사용하는 방법은 크게 문자열 Attribute 사용 , 콜백 함수 사용 으로 나눌 수 있다.

• 문자열 Attribute 사용

  이 방법은 outdated 되었지만 참고용으로 배워보도록 하자.

  class Hello extends React.Component {
      render() {
          return (
            <div> 
              <input ref="myInput">
              </input>
            </div>
          )
      }
    
      componentDidMount() {
        this.refs.myInput.value = "Hi, I used ref to do this";
      }
  }
  
  ReactDOM.render(
    <Hello/>,
    document.getElementById('app')
  );

  render() 생명주기 메소드가 호출될 때 (렌더링 될 때), input 태그에 ref 값을 설정해준다. (ref="refName" 형식)

  그 후, componentDidMount() 생명주기 메소드에서 해당 태그(ref 값을 통해 참조)의 value 값을 변경한다. 문자열 형식으로 만든 ref는 this.refs.refName 으로 접근해야 한다.

  • (!) 컴포넌트의 렌더링이 모두 끝난 후에야 refs가 정의된다. 그러므로 렌더링이 모두 끝난 후에 refs를 사용해야 하며, 만약 그 전에 사용하려 한다면, 아래와 같이 refs 이후의 값이 정의되어 있지 않다는 오류를 볼 수 있다.

    

• 콜백 함수 사용

  class Hello extends React.Component {
    render() {
    	return (
      	  <div> 
        	    <input ref={ref => this.input = ref}>
              </input>
            </div>
          )
    }
    
    componentDidMount() {
    	this.input.value = "I used ref to do this";
    }
    
  }
  ReactDOM.render(
    <Hello/>,
    document.getElementById('app')
  );

  render() 메소드에서, 함수를 이용하여 ref를 설정했다. 함수는 어떤 변수가 ref로 사용될 지 직접 정했다.

  ref를 이용할 땐 this.refs 를 사용하지 않고, 위에서 지정한 값(this.input)을 호출하면 된다.

class Hello extends React.Component {
    handleClick() {
    	  this.textBox.input.value = "I used ref";
    } 
    
    render() {
  	    return (
    	    <div> 
      	    <TextBox ref={ref=>this.textBox = ref}/>
            <button onClick={this.handleClick.bind(this)}>Click Me</button>
          </div>
        )
  }
}

class TextBox extends React.Component {
    render() {
        return(
        	<input ref={ref => this.input = ref}>
          </input>
        )
    }
}

ReactDOM.render(
  <Hello/>,
  document.getElementById('app')
)

Hello 컴포넌트 안에는 TextBox 컴포넌트와 button 태그가 존재한다. TextBox 의 ref를 this.textBox 로 설정해둔 상태이다. TextBox 는 input 태그를 하나 가지고 있는데, 그 태그의 ref는 this.input 을 통해 접근할 수 있다. button 태그는 클릭할 경우, this.textBox.input.value 의 값을 "I used ref" 로 설정하는 콜백함수가 실행이 된다.

위는 단순히 이렇게 사용할 수 있다는 방법을 제시한 것 뿐, 저런 식의 좋지 못한 플로우로 사용해선 안된다.

ref를 사용해야만 구현할 수 있는 사례를 알아보도록 하자.

예를 들어, input과 button이 있고 button을 누르면 input을 초기화하고 focus해야 할 때는 ref를 사용해야만 한다.

class Hello extends React.Component {
    handleClick() {
    	  this.input.value = "";
          this.input.focus();
    } 
    
    render() {
  	return (
    	    <div> 
      	        <input ref={ref=> this.input = ref}/>
                <button onClick={this.handleClick.bind(this)}>Click Me</button>
            </div>
        );        
  }
}


ReactDOM.render(
  <Hello/>,
  document.getElementById('app')
);

Javascript DOM 메소드를 이용하여 input box에 포커싱을 할 수 있다.