React.js ref

2017-10-04

2024-06-07

react

React.js ref: DOM

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

Ref 를 배우기전에
살펴보기 전에 한가지 사실을 먼저 짚고 넘어가야될 부분은 ref를 아무 곳에서나 자주 사용하는건 절대 비권장 한다.
비록 ref를 사용하는것이 가끔씩은 코드를 간결하게 짤 수 있게해주지만, state 및 props 로 해결 할 수 있는 부분에선 ref 를 사용하지 않고, 해결 할 수 없는 부분에서만 ref 를 사용하는 것이 유지보수에 좋은 방향이다.
따라서, 이 개념을 일단 잘 배워뒀다가 남용하지 말고 꼭 필요한 때에 쓰도록 하자.

어떤 경우에 써야할까?
ref는 다음과 같은 경우에 유용하게 사용된다.

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

1. ref 사용하기

ref 를 사용하는 방법은 두가지 방법이 있다 – 문자열 Attribute 사용, 콜백 함수 사용

1.1 문자열 사용하기

이 방법은 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')
);

LINE 5: DOM에 ref=”refName” 형식으로 ref를 지정해준다.
LINE 12: 문자열 형식으로 만든 ref 는 this.refs.refName으로 접근해야 한다.
추가적으론, refs 를 사용 할 때는 컴포넌트가 렌더링 된 후 이여야 한다.

1.2 콜백 함수 사용하기

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')
);

LINE 5: { } 안에 함수를 넣어 ref 를 설정하였다.
이 코드에선 arrow function 이 사용되었다.
함수 안에서 어떤 변수가 ref 로 사용 될 지 직접 정하였다.
LINE 12: 5번줄에서 썼던 변수를 사용하면 됩니다. 더이상 String을 쓸 때 처럼 this.refs 를 사용하지 않아도 된다.

1.3 조금 응용해보기

ref는 일반 DOM 요소 뿐만 아니라 컴포넌트 자체에 적용하여 컴포넌트의 내장된 메소드 및 변수를 사용 할 수 있다. 아래 예제 코드를 한번 살펴보자.

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')
)

위와 같은 구린 데이터플로우는 절대 사용하면 안되고 “이런 것 도 할 수 있다” 란걸 보여주기 위한 예제 이다.

LINE 19: TextBox 컴포넌트의 input 박스의 ref를 this.input으로 지정하였다.
LINE 9: Hello 컴포넌트에서 TextBox 컴포넌트의 ref 를 this.textBox 로 지정한다.
LINE 3: ref 를 통하여 input 의 값을 변경한다.

2. 적용하기

이번엔 ref를 사용하기에 적절한 사례에 대하여 알아보겠다.
예를들어, input과 버튼이 있고, 버튼을 누르면 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')
);

LINE 4: JavaScript DOM 메소드를 이용하여 인풋박스에 포커스를 하였다.
LINE 10: ref를 설정하는 부분이다.

ref를 사용하기 전엔 언제나 이를 사용 하지 않고 해결 할 수 있는 방안이 있는지 고려해보도록 하자.

참조

https://velopert.com/1148

FrontendSPAReact.js