이번 포스팅에서는 스크롤 박스 컴포넌트를 구현하고, 버튼을 클릭했을 때 맨 위로 이동과 맨 아래로 이동 기능을 추가하는 방법을 설명하겠습니다. 이 기능은 주로 긴 내용을 표시할 때 사용하며, 사용자가 쉽게 원하는 위치로 이동할 수 있도록 도와줍니다.
기본 구현
먼저, 스크롤 박스의 기본 구조부터 살펴보겠습니다. 스크롤 박스는 고정된 크기의 박스를 만들고 그 안에 스크롤이 가능한 내용을 추가하는 형태입니다. 이를 위해 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 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.
'코딩 > 리액트' 카테고리의 다른 글
[새싹 성동 2기] React에서 Hooks (useState와 useEffect) 사용하기 (0) | 2024.11.19 |
---|---|
[새싹 성동 2기] React 컴포넌트 라이프사이클과 메서드 활용하기 (1) | 2024.11.19 |
[새싹 성동 2기] React ref의 이해와 사용법: 패스워드 검증 컴포넌트 구현 (0) | 2024.11.19 |
[새싹 성동 2기] 상태 내리기와 상태 올리기(state) (0) | 2024.11.19 |
[새싹 성동 2기] 리액트 이벤트 핸들링 사용법과 예시 (2) | 2024.11.19 |