게시글

강좌5 - React - 4년 전 등록 / 17일 전 수정

리액트의 DOM 참조(Reference, refs)

이 포스팅들은 오래되었습니다. 유튜브에서 최신 리액트 강좌 강좌를 보시는 것을 추천합니다.

안녕하세요. 이번 시간에는 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)에 대해서 알아보겠습니다!

조회수:
0
목록
투표로 게시글에 관해 피드백을 해주시면 게시글 수정 시 반영됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright 2016- . 무단 전재 및 재배포 금지. 출처 표기 시 인용 가능.

댓글

1개의 댓글이 있습니다.
2년 전
Reference 접근 할때 에서 ref={(ref) => { this.hide = ref; }} 대신 자바스크립트 DOM 접근 방식인 getElementById 를 사용하면 어떤 문제가 있나요?
2년 전
리엑트의 메서드를 쓸 수가 없게됩니다