scroll과 ref

scrollTop: 세로 스크롤바 위치
scrollHeight: 스크롤이 있는 박스 안 div 높이
clientHeight: 스크롤이 있는 박스 높이

원하는 태그로 가서 속성에다가 ref={(ref) => this.scroll = ref} 이렇게 설정해주면 해당 돔에 대해서 ref를 사용할 수 있다

여기서 this.scroll 이 부분은 원하는 동작에 따라서 임의로 이름을 설정한다
this.chorong 이렇게 해도 상관없다는 말!!

태그 뿐만이 아니라 컴포넌트에도 같은 방식으로 ref를 사용할 수 있다

다음은 ref를 이용한 스크롤 예제이다

ScrollBox.js

import React, { Component } from 'react';

class ScrollBox extends Component {
  scrollToTop = () => {
    const { scrollHeight, clientHeight } = this.box;
    this.box.scrollTop = clientHeight - scrollHeight;
  };

  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.scrollToTop()}>맨 위로</button>
        <button onClick={() => this.scrollBox.scrollToBottom()}>
          맨 밑으로
        </button>
      </div>
    );
  }
}

export default App;