[React] 스크롤박스 코드에 위아래 이동 기능 구현

📖리액트를 다루는 기술📖 책에 있는 ref예제인 스크롤 박스 조작 코드는 '맨밑으로'라는 버튼을 누르면 자동으로 스크롤을 맨 밑으로 내려가게 해주는 내용이다.

하지만, 나는 여기서 응용하기 위해서 버튼을 누를 때마다 스크롤 박스가 위, 아래로 이동할 수 있도록 구현하고 싶었다.

리액트를 다룬지 얼마 되지 않아 처음에는 이미 작성되어져 있는 코드를 어디서부터 손 대야 될지 막막했지만, 앞에서 했던 예제들을 이용해서 곧장 방법을 찾아낼 수 있었다.

 

일단 스크롤이 내려가있을때는 버튼을 누르면 올라와야하고,

올라가있을 때는 내려와야하기 때문에 상황에 따라 값이 달라지기 때문에 이에 대한 초기값들을 설정해줘야한다.

 

이에 따라 앞 장에서의 예제들을 떠올려서 state에 대한 초기값을 App.js에 설정해주었다.

state = {
    upDown: 'u', //처음에 u라고 설정, 지금 위치가 up에 있다는 뜻
    value: 'To Bottom' //이제 내려가야한다는 뜻에 설정
  }

 

위의 코드처럼 말이다.

그렇다면 버튼을 누름에 따라 state 값이 u -> d 로, To Bottom -> To Top으로 바꿔줄 수 있어야한다.

이런 설정을 해주기 위해서 함수 upOrDown을 만들어서 이용했다.

 

upOrDown = () => {
    if (this.state.upDown === 'u') { //원래 해당 state가 u였으면
      this.setState({
        upDown: 'd', // u->d
        value: 'To Top' //To Bottom -> To Top으로 바꿔줌
      });
    }
    else {
      this.setState({
        upDown: 'u',
        value: 'To Buttom'
      })
    }
  }

 

이 upOrDown함수는 '이동'이라는 버튼을 눌러줄때마다 state가 바껴야되기 때문에 렌터함수 안에 아래의 코드처럼 작성해준다.

 

render() {
    return (
      <>
        <ScrollBox ref={(ref) => this.scrollBox = ref} />
        <button onClick={() => {
          this.scrollBox.scrollChange(this.state.upDown);
          this.upOrDown(); //클릭 될때마다 state값 바꿔주기
        }}>
          이동
        </button>
      </>
    );
  }

 

그렇다면, 스크롤박스가 구현되어있는 ScrollBox.js 파일은 무엇을 바꿔주고 추가해줘야할까?

바로 처음에 받아지는 state값에 따라 위로 올리고, 아래로 스크롤을 내리는 함수를 만들어야한다. 

매개변수 param을 받는다. 만약 param의 값이 u라면, 내리도록 만들고 아니라면 스크롤을 올려야한다.

이는 어떻게 구현하면 좋을까?

 

//ScrollBox.js

scrollChange = (param) => {
        const { scrollHeight, clientHeight } = this.box;
        /*위 코드는 비구조화 할당 문법 사용
        다음 코드와 동일
        const scrollHeight = this.box.scrollHeight;
        const clientHeight = this.box.clientHeight;
        */
        if (param === 'u') { //up일때 내릴 준비
            this.box.scrollTop = scrollHeight - clientHeight;
        }
        else {
            this.box.scrollTop = 0;
        }
}

 

위와 같은 함수를 만들어주었다.

여기서 ScrollTop은 세로 스크롤바 위치, ScrollHeight는 스크롤박스의 높이로 650px이고, clientHeight는 스크롤이 있는 박스의 높이로 300을 의미한다.

스크롤바를 밑으로 내리기 위해서는 scrollHeight에서 clientHeight를 내려주면 되겠죠??

위와 같은 방법으로 완성된 코드는 아래와 같습니다!

 

App.js

 

import React, { Component } from 'react';
import './App.css';
import ValidationSample from './ValidationSample';
import ScrollBox from './ScrollBox';

class App extends Component {
  state = {
    upDown: 'u',
    value: 'To Bottom'
  }
  upOrDown = () => {
    if (this.state.upDown === 'u') {
      this.setState({
        upDown: 'd',
        value: 'To Top'
      });
    }
    else {
      this.setState({
        upDown: 'u',
        value: 'To Buttom'
      })
    }
  }
  render() {
    return (
      <>
        <ScrollBox ref={(ref) => this.scrollBox = ref} />
        <button onClick={() => {
          this.scrollBox.scrollChange(this.state.upDown);
          this.upOrDown();
        }}>
          이동
        </button>
      </>
    );
  }
}

export default App;

 

ScrollBox.js

 

import React, { Component } from 'react';

class ScrollBox extends Component {
    scrollChange = (param) => {
        const { scrollHeight, clientHeight } = this.box;
        /*위 코드는 비구조화 할당 문법 사용
        다음 코드와 동일
        const scrollHeight = this.box.scrollHeight;
        const clientHeight = this.box.clientHeight;
        */
        if (param === 'u') { //up일때 내릴 준비
            this.box.scrollTop = scrollHeight - clientHeight;
        }
        else {
            this.box.scrollTop = 0;
        }

    }
    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>
        );
    }
}
export default ScrollBox;