[React] 컴포넌트의 DOM 관련 이벤트 - 무한 scroll 예제

 오늘은 ref라는 특수 프로퍼티를 사용하여 DOM 객체에 접근하는 방법과 onClick 같은 이벤트 프로퍼티에 대해 알아보겠습니다. 쉽게 말씀드리면 getElementById()로 받은 객체를 addEventListener()로 등록한 함수에서 사용하는 것입니다. 자바스크립트를 아시는 분은 근방 이해하실 테니, 아래 무한 scroll 예제를 한번 보시죠!

 

// ..\test_project\src\components\ScrollComponent.jsx

import React from "react";

class ScrollComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      listEnd: 20, // 초기에 리스트 20개 시작
      listPlus: 10, // 스크롤을 내리면 10개식 추가
    };

    // 콜백 함수 바인딩
    this.setRef = this.setRef.bind(this);
    this.checkScroll = this.checkScroll.bind(this);
  }

  //  ref 프로퍼티 연결
  setRef(ref) {
    this.ref = ref;
  }

  // 스크롤 위치 체크
  checkScroll() {
    // div 태크에서 받은 ref 프로퍼티 객체
    const posBottom = this.ref.getBoundingClientRect().bottom;
    const winHeight = window.innerHeight;

    console.log(`posBottom : ${posBottom} , winHeight : ${winHeight}`);

    // 스크롤이 내려오면 리스트 추가
    if (posBottom < winHeight) {
      this.setState({ listEnd: this.state.listEnd + this.state.listPlus });
    }
  }

  // 컴포넌트가 마운트 됐을 떄
  componentDidMount() {
    // 이벤트 리스너에 체크 함수 연결
    window.addEventListener("scroll", this.checkScroll);
    this.checkScroll();
  }

  // 컴포넌트가 해체 됐을 때
  componentWillUnmount() {
    // 이벤트 리스너에서 삭제
    window.removeEventListener("scroll", this.checkScroll);
  }

  render() {
    // 배열형 컴포넌트식으로 추가
    const listComponent = [];
    for (var i = 1; i <= this.state.listEnd; i++) {
      // 리스트일 경우에는 꼭 key를 지정
      listComponent.push(<h1 key={i}>리스트 컴포넌트{i}</h1>);
    }
    // !!! ref 프로퍼티는 변수 할당이 아닌 콜백 함수형으로 전달 !!!
    return <div ref={this.setRef}>{listComponent}</div>;
  }
}

export default ScrollComponent;

 

// ..\test_project\src\App.js

import React, { Component } from "react";
import ScrollComponent from "./components/ScrollComponent";

class App extends Component {
  render() {
    return (
      <div>
        <ScrollComponent />
      </div>
    );
  }
}

export default App;

 

 로직은 간단히 스크롤 위치를 체크해서 아래쪽으로 내려오면 리스트가 계속 추가되는 정도입니다.

실무에서 사용하기에는 다듬어야 할 부분이 많지만, 전 시간에 배웠던 배열형 컴포넌트와 DOM 객체를 잘 이용하면 쉽게 나열형 자료를 만들 수 있습니다. div 태그에서 ref를 넘기는 방식만은 꼭 기억해 주시기 바랍니다.

 

그럼 다음으로 아래 표를 한번 보시죠!

대표적인 이벤트 분류	리액트에서 사용할 때의 이벤트 이름
마우스 이벤트	onClick, onDoubleClick, onDrag, onDragStart, onDragEnd, onDrop, onMouseMove, onMouseOut, onContextMenu 등
키보드 이벤트	onKeyUp, OnKeyDown, onKeyPress
입력폼 이벤트	onInput, onSubmit, onChange, onInvalid
클립보드 이벤트	onCopy, onPaste, onCut

 

 자주 사용하는 대표적인 DOM 이벤트입니다. 간단히 자바스크립트의 DOM 이벤트를 리액트가 맵핑한 프로퍼티 이름이라고 생각하시면 됩니다. 원래 이름에 on을 붙이고 다음은 낙타 표기법(Camel case)을 사용했습니다.

지금까지 예제에서 onClick은 많이 사용하였으니 별도의 소스는 넣지 않겠습니다. 필요한 이벤트는 꼭 검색하는 습관을!

 

그럼 오늘은 여기까지 입니다.

 

리액트라고 많이 다르진 않죠?

---

2020/08/18 - [Web프론트엔드/리액트] - [React] 리액트 개발환경 구축

2020/08/21 - [Web프론트엔드/리액트] - Visual Studio Code 및 React 관련 플러그인 설치

2020/09/09 - [Web프론트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트에서 사용하는 JSX

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자

2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티

2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트

2020/09/21 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ③ - 콜백 함수

2020/09/22 - [Web프론트엔드/리액트] - [React] 컴포넌트의 형태를 분류해보자

2020/09/24 - [Web프론트엔드/리액트] - [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론

2020/09/24 - [Web프론트엔드/리액트] - [React] 컴포넌트의 Lifecycle 생명주기 함수 - 실습