ZeroCho Blog

안녕하세요. 이번 시간에는 refs라고 불리는 Reference에 대해 알아보겠습니다. Hook의 useRef를 알아보려고 하시는 거면 이 링크 를 보시면 됩니다.

Reference

React를 사용하다보면, 컴포넌트의 메소드에서 컴포넌트의 태그에 직접 접근하고 싶을 때가 있습니다. 그럴 때 사용하는 게 ref 속성입니다. 아래의 컴포넌트에서 숨기기 버튼을 보면 ref 속성이 ref={(ref) => { this.hide = ref; }} 로 설정되어있습니다. 여기서 ref는 해당 태그의 DOM 객체를 가리킵니다. this.hide 속성에 자기를 대입하는 거죠. 

this.hide;

onClickButton = () => {
  this.setState({ hidden: true });
  this.hide.current.disabled = true;
};

render() {
  return (
    <button ref={(ref) => { this.hide = ref; }}>숨기기</button>
  );
} 

그리고 onClickButton 메소드를 보면 this.hide.disabled = true; 라는 문장을 찾을 수 있습니다. 조금 전에 this.hide = ref; 로 대입했기 때문에 this.hide는 태그의 DOM 객체를 가리킵니다. 이렇게 컴포넌트 태그에 ref 속성을 주면 this를 통해 해당 태그로 바로 접근 가능합니다. 예전에는 ref 속성에 ref="hide" 이렇게 속성명 값을 직접 문자열로 넣어주고 this.refs[속성명]으로 접근했었는데 이것이 deprecated 되어 더는 쓰이지 않습니다.

리액트 16.3부터는 React.createRef()가 추가되었습니다. 이 방식으로 하려면 컴포넌트 내에서

this.hide = React.createRef();

onClickButton = () => {
  this.setState({ hidden: true });
  this.hide.current.disabled = true;
};

render() {
  return (
    <button ref={this.hide}>숨기기</button>
  );
}

이런 식으로 하면 됩니다. current 속성으로 실제 DOM에 접근한다는 점이 조금 다릅니다.

다음 시간에는 React의 생명주기(Life Cycle)에 대해서 알아보겠습니다!