더북(TheBook)

5.3.4 컴포넌트에 ref 달고 내부 메서드 사용

 

그럼 App 컴포넌트에서 ScrollBoxref를 달고 버튼을 만들어 누르면, ScrollBox 컴포넌트의 scrollToBottom 메서드를 실행하도록 코드를 작성하겠습니다.

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;

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.