8. reference: DOM

1. ref 는 어떤 상황에서 사용해야 하나 - "DOM을 꼭 간접적으로 건드려야 할 때 사용한다."

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas 요소에 그림 그리기 등

이 때는 어쩔수 없이 DOM에 직접적으로 접근해야 하는데, 이 때 ref 를 사용한다.

 

2. ref 사용법

- ref 를 달아야하는 DOM에 ref 속성을 추가할 때는 props를 설정하듯이 하면 된다. ref 값으로 콜백함수를 전달하고, 콜백 함수는 ref를 파라미터로 가지며 , 콜백 함수 내부에서 컴포넌트의 멤버 변수에 ref를 담는 코드를 작성한다.

 

<input ref={(ref) => {this.input=ref}}></input>

 

이렇게 하면 앞으로 this.input 은 input 요소의 DOM을 가리키게 된다. ref 이름은 자유롭게 지정한다.

(ex this.jongwan=ref)

 

handleButtonClick = () => {

this.setState({

clicked: true,

validated: this.state.password === '0000'

})

this.input.focus(); //버튼 클릭시 input 에 포커스를 준다

}

 

3. 컴포넌트에 ref 달기

- 리액트에서는 컴포넌트에도 ref를 달 수 있다. 이 방법은 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓴다.

 

<MyComponent ref={(ref) => {this.myComponent=ref}} />

 

이렇게 하면 MyComponent 내부의 메서드 및 멤버 변수에도 접근할 수 있다. 즉 내부의 ref(myComponent.handleClick .. 등)

 

예제 부모컴포넌트에서 스크롤바 내리기

순서 : ScrollBox 컴포넌트 생성 -> 컴포넌트에 ref 달기 -> ref를 이용하여 컴포넌트 내부 메서드 호출하기

 

ScrollBox.js

import React, { Component } from 'react';   class ScrollBox extends Component { scrollToBottom = () => { //비 구조화 할당 문법 const { scrollHeight, clientHeight} = this.box;   this.box.scrollTop = scrollHeight - clientHeight; } render() { const style = { border: '1px solid black' , height: '300px', width: '300px', overflow: 'auto', position: 'relative' };   const innerStyle = { width: '100%', height: '650px', background: 'linear-gradient(white, black)' } return ( <div style={style} ref={(ref) => {this.box=ref}}> <div style={innerStyle}></div> </div> ); } } export default ScrollBox;

App.js

import React, { Component } from 'react'; import ScrollBox from './ScrollBox'   class App extends Component { render() { return ( <div> <ScrollBox ref={(ref) => this.scrollBox=ref} /> <button onClick={() => this.scrollBox.scrollToBottom()}>맨 밑으로</button> </div> ); } } export default App;

 

결과