React에서 스크롤바 기능 구현

React는 번거로움 없이 사용자 친화적인 인터페이스를 구현할 수 있기 때문에 인기 있는 프런트 엔드 라이브러리입니다.

가장 일반적인 문제 중 하나는 대량의 데이터를 표시하는 사용자 친화적인 방법을 찾는 것입니다. 스크롤 막대는 데이터 오버플로를 처리하기 위한 간단하고 사용자 친화적인 솔루션입니다.

이 가이드에서는 React의 개별 구성 요소에 스크롤바를 적용하는 방법을 살펴봅니다.

React에서 스크롤바 구현하기

React에서 너무 많은 콘텐츠를 처리하는 방법에는 여러 가지가 있습니다. 스크롤바 기능을 구현하는 가장 쉬운 방법은 CSS를 이용하는 것입니다.

이 예에서는 하나의 부모 구성 요소와 하나의 자식 구성 요소가 있습니다. <Section> 구성 요소의 기본 컨테이너에 className 값 section을 제공합니다.

export default function App() {
  return (
    <div className="App">
      <Section>
        some text
      </Section>
      <Section>
        some text
      </Section>
      <Section>
          some text
      </Section>
    </div>
  );
}
function Section(props) {
  return <div className="section">{props.children}</div>;
}

그런 다음 CSS로 이동하여 하위 구성 요소에 스타일을 적용할 수 있습니다.

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.section {
  border: 2px solid red;
  width: 30%;
  font-size: 20px;
  overflow-y: scroll;
}

여기서 overflow-y CSS 속성이 가장 중요합니다. scroll 값을 지정하면 콘텐츠(이 경우 텍스트)가 컨테이너에 맞지 않을 때마다 스크롤바를 생성하도록 HTML에 지시합니다.

overflow-y 속성은 y축을 지정하므로 너비에는 영향을 주지 않고 높이에만 영향을 미칩니다.

이 속성이 없으면 텍스트가 구성 요소의 테두리 밖으로 넘칠 것입니다.

이 CodeSandbox의 라이브 데모로 이동하여 이 속성을 적용한 효과를 확인할 수 있습니다.

세 개의 <Section> 구성 요소가 있습니다. 첫 번째는 정상적인 크기에 맞지 않는 너무 많은 텍스트를 포함합니다.

따라서 전체 텍스트를 보기 위해 아래로 스크롤할 수 있는 스크롤 막대가 있습니다. 가운데 구성 요소에는 텍스트가 너무 많지 않으므로 아래로 스크롤할 필요가 없습니다.

마지막 구성 요소를 사용하면 첫 번째 구성 요소와 유사하게 아래로 스크롤할 수 있습니다.

이 CSS 속성을 사용하여 필요한 구성 요소에만 스크롤 막대를 선택적으로 적용할 수 있습니다. 부모 구성 요소에 대해서도 동일한 작업을 수행할 수 있습니다.