React를 사용한 부드러운 스크롤 실전 적용: 튜토리얼

Preslav Dobrev2022-10-05 · 9 min read

React은 미래지향적인 웹사이트 디자인을 구축하고 사용자 인터페이스를 개선하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. 견고함, 유연성 및 효율성 덕분에 경쟁 프론트엔드 라이브러리 및 프레임워크보다 뛰어난 성능을 보여왔습니다. React는 사용자 정의 및 동적 애니메이션을 용이하게 하는 뛰어난 기능과 독보적인 기능을 제공합니다.

애니메이션 컬렉션 목록 중에서 React의 부드러운 스크롤(smooth scrolling)은 웹 앱의 상호작용성을 높이고 애니메이션을 간소화하는 데 도움이 됩니다. 부드러운 스크롤은 사용자가 탐색 바를 사용하여 페이지의 다른 섹션으로 이동할 수 있도록 하는 기능입니다. 즉, 버튼을 눌러 유사한 페이지의 다른 섹션으로 즉시 이동하는 대신, 사용자는 스크롤 애니메이션을 통해 대상 위치로 안내됩니다.

이 가이드에서는 React를 사용하여 부드러운 스크롤을 구현하는 단계를 안내해 드립니다..

시작해 봅시다!

사전 요구 사항

이 튜토리얼을 따라 하려면 다음이 필요합니다:

Git이 시스템에 설치되어 있어야 합니다.
- 다음을 따라 하여 Ubuntu 18.04에 Git을 설치하고 구성하세요.
최신 버전의 Node.js가 설정되어 있어야 합니다.
- 이 튜토리얼을 사용하여 Ubuntu 18.04에 Node.js를 설치하세요.

기본 설정: react-scroll 설치

이 초보자용 가이드에서는 react-scroll을 사용하여 간단한 애플리케이션을 설계해 보겠습니다. 만약 React 기초에 익숙하고 react-scroll 기능에 대한 지식을 한 단계 높이고 싶다면 이 요약된 단계를 참조하세요.

먼저, 다음 명령어를 사용하여 react-scroll을 설치합니다:

npm npm i -S react-scroll

1	npm npm i -S react-scroll

다음으로, react-scroll 패키지를 가져옵니다(import):

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

그 후, 앱의 특정 섹션을 대상으로 하는 <Link /> 컴포넌트를 삽입합니다:

<Link to="section1">

1	<Link to="section1">

계속 진행하여 부드러운 스크롤 기능이 있는 React 애플리케이션을 설계해 보겠습니다.

1단계: React 앱 복제 및 실행

이 가이드에서는 상단에 탐색 바가 포함된 시작용 React 프로젝트를 사용합니다. 거기에서 순차적으로 배열된 5개의 고유한 <sections>을 볼 수 있습니다.

현재 탐색 바의 링크는 앵커 태그입니다. 하지만 부드러운 스크롤을 활성화하려면 곧 이를 업데이트해야 합니다. React With Smooth Scrolling 페이지를 따라 프로젝트 리포지토리로 이동하세요. 이 링크는 start 브랜치용이라는 점에 유의하는 것이 중요합니다. master 브랜치에는 완료된 모든 변경 사항이 포함되어 있습니다. URL을 열면 다음과 같은 리포지토리가 표시됩니다:

리포지토리 페이지에서 녹색으로 된 Code 버튼을 볼 수 있습니다. 누르세요 드롭다운 화살표를:

화살표를 클릭하면 HTTP 링크가 나타납니다.:

이제 git 터미널로 이동하여 다음 명령어를 사용해 로컬 머신에 프로젝트를 clone 하세요:

$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

1	$ git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

In the src/Components 디렉터리에서 Navbar.js 파일을 찾을 수 있습니다. 이 파일에는 <Navbar>가 포함되어 있으며, 여기에는 nav-items가 순차적으로 배치된 5개의 고유한 <Section>들에 대응하도록 구성되어 있습니다:

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
    render() {
    return (
    <nav className="nav" id="navbar">
        <div className="nav-content">
            <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
         />
        <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
        </ul>
    </div>
    </nav>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="로고."

onClick={this.scrollToTop}

</ul>

</div>

</nav>

);

}

다음으로, App.js 파일(위치: src 디렉터리)로 이동합니다. 그곳에서 <Navbar>이 5개의 <Section>들과 함께 배치된 것을 확인할 수 있습니다:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";

class App extends Component {
    render() {
        return (
            <div className="App">
            <Navbar />
            
            <Section
            title="섹션 1"
            subtitle={dummyText}
            dark={true}
            id="section1"
            />

            <Section
            title="섹션 2"
            subtitle={dummyText}
            dark={false}
            id="section2"
            />

            <Section
            title="섹션 3"
            subtitle={dummyText}
            dark={true}
            id="section3"
            />

            <Section
            title="섹션 4"
            subtitle={dummyText}
            dark={false}
            id="section4"
            />

            <Section
            title="섹션 5"
            subtitle={dummyText}
            dark={true}
            id="section5"
            />
        </div>
        );
        }
    }
export default App;

import React, { Component } from "react";

import logo from "./logo.svg";

import "./App.css";

import Navbar from "./Components/Navbar";

import Section from "./Components/Section";

import dummyText from "./DummyText";

class App extends Component {

render() {

return (

<Section

title="섹션 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="섹션 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="섹션 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="섹션 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="섹션 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

기본적으로 모든 <Section> 컴포넌트에는 다음이 포함됩니다: title 및 subtitle.

DRY 원칙의 실제 적용

튜토리얼을 위해 더미 텍스트를 사용하고 있으므로, 시간을 절약하고 반복을 줄이기 위해 dummyText.js 파일을 추가해 보겠습니다. 새로 생성된 JavaScript 파일을 사용하여 모든 <Section> 엘리먼트에 전달합니다.

React 설치

다음 명령어를 사용하여 앱을 실행하세요:

cd React-With-Smooth-Scrolling
npm install
npm start

cd React-With-Smooth-Scrolling

npm install

npm start

다음 명령을 실행하면 rpm이(가) 개발 모드에서 애플리케이션을 시작합니다. localhost:3000에 접속하여 시스템에서 실행 중인 앱을 확인하세요:

이제 앱이 실행 중이므로, 다음 단계로 넘어가 react-scroll을(를) 다음 단계에서 설치해 보겠습니다.

2단계: React-Scroll 설치 및 구성

먼저, Node Package Manager의 패키지 페이지를 방문하여 react-scroll을(를) 다운로드해야 합니다. 이 가이드를 작성하는 시점에는 가장 최신 릴리스의 react-scroll , 1.8.7을(를) 사용하고 있습니다. 향후 업데이트가 있을 경우 최신 버전을 다운로드하세요:

다음 명령어를 실행하여 설치할 수 있는 react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

그 후, Navbar.js 파일로 이동하여 Link 및 animateScroll을(를) react-scroll에서 가져옵니다. 단순함과 사용 편의성을 위해 animateScroll을(를) 다음으로 사용합니다: scroll:

import { Link, animateScroll as scroll } from "react-scroll";

1	import { Link, animateScroll as scroll } from "react-scroll";

그 다음, nav-items가 <Link> 컴포넌트를 사용하도록 업데이트합니다. 다양한 속성들이 나열되어 있는 <Link> 컴포넌트는 우리 튜토리얼에서 크게 중요하지 않습니다. 하지만 다음을 확인하여 이러한 속성들을 탐색할 수 있습니다: 문서 페이지.

주의 깊게 살펴볼 만한 몇 가지 필수 속성:

activeClass – 요소가 활성화되었을 때 사용되는 클래스입니다.
to – 지정된 대상으로 스크롤하도록 지시합니다.
- The to 기능은 컴포넌트가 어떤 요소로 스크롤해야 하는지 지시하므로 매우 중요합니다.
spy: 스크롤이 대상 위치에 있을 때 Link를 선택하도록 지정합니다.
smooth: 스크롤에 애니메이션 효과를 적용합니다.
offset: 예를 들어 패딩과 같이 추가적인 px만큼 더 스크롤합니다.
- 또한 offset을 사용하여 개별 <Section>에 도달하기 위한 추가 스크롤 양을 정의할 수 있습니다..
duration: 숫자나 함수로 지정할 수 있는 애니메이션 스크롤 시간입니다.

다음은 모든 <Link> 컴포넌트에 사용할 수 있는 기능들의 예시입니다. 이들 사이의 유일한 차이점은 모두 서로 다른 to 속성이라는 점인데, 이는 모두 서로 다른 <Section>들을 가리키기 때문입니다:

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

모든 nav- 아이템을 업데이트해 보세요. 모든 항목이 성공적으로 추가되면 브라우저로 돌아가 실시간 부드러운 스크롤을 확인해 보세요.

3단계: 활성 링크 스타일링

이 단계에서는 CSS 속성을 사용하여 코드 블록을 재디자인하고 멋지게 꾸며보겠습니다. activeClass 기능을 사용하면 클래스를 정의하고, <Link> 컴포넌트의 to 요소가 활성화되었을 때 이를 적용할 수 있습니다. 사용 중인 <Link>에 지정된 to 요소가 페이지 상단에 보이면 해당 <Link>가 활성화된 것으로 간주됩니다. <Link>를 클릭하거나 <Section>을 수동으로 스크롤하여 내려서 <Link>를 활성화해 보세요..

테스트를 통해 어떻게 작동하는지 확인해 보겠습니다. Chrome DevTools를 열고 아래에 강조 표시된 다섯 번째 <Link>를 검사합니다. <Link>를 클릭하거나 <Section>을 페이지 하단으로 수동 스크롤하면 활성 클래스가 적용되는 것을 관찰할 수 있습니다:

추가 단계로, 활성 클래스를 생성하고 링크에 밑줄을 긋습니다. 그런 다음, 이 작은 CSS 블록을 App.css 파일(위치: src 디렉터리)에 추가합니다:

.nav-item > .active {
    border-bottom: 1px solid #333;
}

.nav-item > .active {

border-bottom: 1px solid #333;

}

그 후 브라우저를 새로고침합니다. 조금 스크롤해 보면 지정된 <Link>에 이제 밑줄이 표시되는 것을 확인할 수 있습니다:

4단계: 더 많은 기능 추가하기

위에서 사용한 속성 외에도 사용할 수 있는 몇 가지 기능으로 scrollToTop, scrollToBottom 등이 있습니다. 이러한 함수를 직접 호출하고 동작을 명시적으로 관리할 수 있습니다. 이러한 기능과 관련하여, 당연히 내비게이션 바의 앱 로고를 클릭하면 홈 페이지의 상단으로 이동하게 됩니다.

Using the scrollToTop 함수를 사용하여 사용자를 페이지 상단으로 다시 스크롤하도록 nav-logo에 클릭 핸들러를 추가합니다:

scrollToTop = () => {
    scroll.scrollToTop();
};

scrollToTop = () => {

scroll.scrollToTop();

};

Using the scrollToTop 함수를 사용하여 사용자를 페이지 하단으로 스크롤하도록 nav-logo에 클릭 핸들러를 추가합니다:

scrollToTop = () => {
    scroll.scrollToBottom();
};

scrollToTop = () => {

scroll.scrollToBottom();

};

다시 브라우저로 돌아와서 페이지를 아래로 스크롤한 다음 내비게이션 바의 로고를 클릭하면 페이지 상단으로 돌아가는 것을 확인할 수 있습니다.

결론

부드러운 스크롤은 웹 앱에 풍부한 시각적 가치를 더할 수 있는 기능 중 하나입니다. react-scroll 패키지를 사용하면 큰 오버헤드 없이 이 기능을 활용할 수 있습니다.

학습을 이어가기 위한 다음 단계로, 다음에서 찾을 수 있는 더 많은 React 및 JavaScript 튜토리얼을 확인해 보세요: 저희 블로그:

즐거운 컴퓨팅 되세요!

Preslav Dobrev

작성자 · CloudSigma

Preslav Dobrev는 CloudSigma의 크리에이티브 디자이너로서, 전통적이고 혁신적인 마케팅 채널을 활용하여 일관된 비즈니스 정체성을 구축하는 데 중점을 두고 있습니다. 그는 영향력 있는 브랜드 내러티브를 창출하기 위해 예술적 비전과 전략적 마케팅을 결합하는 데 능숙합니다.

React를 사용한 부드러운 스크롤 실전 적용: 튜토리얼

사전 요구 사항

기본 설정: react-scroll 설치

1단계: React 앱 복제 및 실행

2단계: React-Scroll 설치 및 구성

3단계: 활성 링크 스타일링

4단계: 더 많은 기능 추가하기

결론

Preslav Dobrev

댓글