코딩/리액트

[새싹 성동 2기]React에서 스크롤 박스 구현하기

insu90 2024. 11. 19. 17:30

이번 포스팅에서는 스크롤 박스 컴포넌트를 구현하고, 버튼을 클릭했을 때 맨 위로 이동맨 아래로 이동 기능을 추가하는 방법을 설명하겠습니다. 이 기능은 주로 긴 내용을 표시할 때 사용하며, 사용자가 쉽게 원하는 위치로 이동할 수 있도록 도와줍니다.

기본 구현

먼저, 스크롤 박스의 기본 구조부터 살펴보겠습니다. 스크롤 박스는 고정된 크기의 박스를 만들고 그 안에 스크롤이 가능한 내용을 추가하는 형태입니다. 이를 위해 div 요소에 overflow: auto 스타일을 적용하여 내용이 넘칠 때 스크롤이 생기도록 합니다.

1. ref 디렉토리에 ScrollBox.js 컴포넌트 만들기

import { Component } from "react";

class ScrollBox extends Component {
    render() {
        const styles = {
            outer: {
                border: '1px solid black',
                height: 300,  // 박스의 높이를 300px로 설정
                width: 300,   // 박스의 너비를 300px로 설정
                overflow: 'auto'  // 내용이 넘치면 스크롤이 생기도록 설정
            },
            inner: {
                width: '100%',  // 내부 콘텐츠는 부모의 너비에 맞춤
                height: 650,    // 내부 콘텐츠는 650px 높이로 설정 (스크롤을 위해 충분히 커야 함)
                background: 'linear-gradient(white, black)'  // 그라데이션 배경 설정
            }
        };

        return (
            <div style={styles.outer}>
                <div style={styles.inner}></div>
            </div>
        );
    }
}

export default ScrollBox;

위 코드에서는 외부 박스(outer)를 height: 300px로 설정하여 크기를 제한하고, 내부 내용(inner)은 height: 650px로 설정하여 스크롤이 가능하도록 했습니다. 그라데이션 배경을 설정하여 스크롤할 때 변화가 돋보이도록 했습니다.

2. App.js에 ScrollBox 컴포넌트 추가

import ScrollBox from "./ref/ScrollBox";

function App() {
  return (
    <ScrollBox />
  );
}

export default App;

이제 ScrollBox 컴포넌트를 App.js에 추가하여 화면에 표시되도록 했습니다.

위와같이 나옴을 확인할 수 있습니다.

기능 추가: 맨 위로 이동, 맨 아래로 이동 버튼

스크롤 박스에 맨 위로 이동맨 아래로 이동 버튼을 추가하여 사용자가 버튼을 클릭했을 때 해당 위치로 스크롤이 이동하도록 기능을 구현할 수 있습니다.

3. 버튼 추가 및 기능 구현

import { Component, createRef } from "react";

class ScrollBox extends Component {
    myscroll = createRef();  // 스크롤 박스를 참조할 ref 생성

    // 맨 위로 이동하는 함수
    scrollTop = () => {
        this.myscroll.current.scrollTop = 0;
    };

    // 맨 아래로 이동하는 함수
    scrollBottom = () => {
        const { scrollHeight, clientHeight } = this.myscroll.current;
        this.myscroll.current.scrollTop = scrollHeight - clientHeight;
    };

    render() {
        const styles = {
            outer: {
                border: '1px solid black',
                height: 300,
                width: 300,
                overflow: 'auto'
            },
            inner: {
                width: '100%',
                height: 650,
                background: 'linear-gradient(white, black)'
            }
        };

        return (
            <>
                {/* 스크롤 박스를 ref로 참조하여 스크롤 위치를 제어 */}
                <div ref={this.myscroll} style={styles.outer}>
                    <div style={styles.inner}></div>
                </div>
                <div>
                    {/* 버튼 클릭 시 각 함수 호출 */}
                    <button onClick={this.scrollTop}>맨 위로 이동</button>
                    <button onClick={this.scrollBottom}>맨 아래로 이동</button>
                </div>
            </>
        );
    }
}

export default ScrollBox;

4. 코드 설명

  • createRef()를 사용하여 myscroll이라는 참조를 생성했습니다. 이를 통해 스크롤 박스를 직접 제어할 수 있습니다.
  • scrollTop 함수는 스크롤 박스의 scrollTop 값을 0으로 설정하여 맨 위로 이동하게 만듭니다.
  • scrollBottom 함수는 scrollHeight(내용의 총 높이)에서 clientHeight(스크롤 영역의 높이)를 뺀 값을 scrollTop에 설정하여 맨 아래로 스크롤합니다.
  • 버튼 클릭 시 각각의 함수가 호출되어 스크롤 박스가 맨 위나 맨 아래로 이동합니다.

이 포스팅에서는 React에서 스크롤 박스를 구현하고, 버튼을 클릭했을 때 맨 위로 이동하거나 맨 아래로 이동하는 기능을 추가하는 방법을 설명했습니다. 이와 같은 기능은 긴 리스트나 콘텐츠를 다룰 때 유용하게 사용할 수 있습니다. ref를 활용하여 DOM 요소를 직접 제어하는 방법을 이해하고 실습할 수 있었습니다.

 

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.