RedPlus 개인 블로그

시삽: 레드플러스 님 
게시판 이동:
 제목 : Debounce 기능이 적용된 React.js SearchBox 입력 컴포넌트
글번호: 336
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2020/12/12 오후 11:36:44
조회수: 138
파일: Reactjs_SearchBoxComponent.jpg (65 KB) / 전송수: 40
Reactjs_SearchBoxComponent.jpg

Blazor Server에서 사용하던

SearchBox 컴포넌트를 React.js 컴포넌트로 만들어 보았습니다. 

 

SearchBox.jsx

import React, { Component } from 'react';

export class SearchBox extends Component {
    constructor(props) {
        super(props);

        this.state = {
            searchQuery: ""
        };

        this.debounce = this.debounce.bind(this); 
        this.searchQueryChanged = this.searchQueryChanged.bind(this); 
        this.sendSearchQuery = this.sendSearchQuery.bind(this); 
    }
    sendSearchQuery() {
        this.props.searchQueryChanged(this.state.searchQuery); // SearchQuery를 부모 컴포넌트로 전송
    }
    searchQueryChanged(e) {
        const qry = e.target.value;
        this.setState({ searchQuery: qry });
        console.log(qry);
        this.searchHandler();
    }
    searchHandler = this.debounce(() => {
        console.log("Child", this.state.searchQuery);
        this.sendSearchQuery();
    }, 3000);
    debounce(fn, interval) {
        let debounceTimer
        return _ => {
            clearTimeout(debounceTimer)
            debounceTimer = setTimeout(_ => {
                debounceTimer = null
                fn.apply(this, arguments)
            }, interval)
        };
    }
    render() {
        return (
            <>
                <div className="input-group mb-3">
                    <input className="form-control form-control-sm form-control-borderless" type="search" placeholder="Search topics or keywords" aria-describedby="btnSearch"
                        value={this.state.searchQuery}
                        onChange={this.searchQueryChanged}
                    />
                    <div className="input-group-append">
                        <button className="btn btn-sm btn-success" type="button" onClick={this.sendSearchQuery}>Search</button>
                    </div>
                </div>
            </>
        );
    }
}

 

SearchComponent.jsx

import React, { Component } from 'react';
import { SearchBox } from '../Shared/SearchBox';

export class SearchComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchQuery: ''
        };
        this.searchQueryChanged = this.searchQueryChanged.bind(this); 
    }
    searchQueryChanged(searchQuery) {
        console.log("Parent", searchQuery);
        this.setState({ searchQuery: searchQuery });
    }
    render() {
        return (
            <>
                <h1>SearchBox Component Test</h1>
                <SearchBox
                    searchQueryChanged={(searchQuery) => this.searchQueryChanged(searchQuery)}>
                </SearchBox>
            </>
        );
    }
}

 

참고로, 검색 박스에 대한 사용은 

React.js 게시판 프로젝트 강좌에서 사용됩니다.

 

끝.

 

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 Failed to execute goal org.apache.maven.plugins... 2020-12-18_13-41-47.jpg(29 KB) Administrator 2020-12-18 117
현재글 Debounce 기능이 적용된 React.js SearchBox 입력 컴포넌트 Reactjs_SearchBoxComponent.jpg(65 KB) Administrator 2020-12-12 138
다음글 ASP.NET Core MVC 처음 시작할 때 특정 컨트롤러로 이동하기 - Administrator 2020-08-30 315
관련 페이지 리스트
numtitlenamedateview
339 C# 대화형 소개 - C# 인터렉티브(C# 대화형)를 사용한 C# 프로그래밍 연습 Administrator 2020-12-31 105
338 덕 타이핑(Duck Typing) Administrator 2020-12-27 81
337 Failed to execute goal org.apache.maven.plugins... Administrator 2020-12-18 117
336 Debounce 기능이 적용된 React.js SearchBox 입력 컴포넌트 Administrator 2020-12-12 138
335 ASP.NET Core MVC 처음 시작할 때 특정 컨트롤러로 이동하기 Administrator 2020-08-30 315
334 C# 교과서 마스터하기 1기 모집 Administrator 2020-05-26 421
333 Windows 환경에서 리액트 프로젝트 생성 방법 Administrator 2020-05-25 362
332 닷넷 웹 개발자로 취업하기 Administrator 2020-04-11 1491
331 components-reconnect-modal_ID를 사용하여 서버 연결 창 모양 ... Administrator 2020-02-09 520
330 Blazor + ASP.NET Core Identity => BuiltIn Accou... Administrator 2020-01-16 858
329 HTTP Error 500.30 - ANCM In-Process Start Failu... Administrator 2020-01-03 818
328 Blazor Dynamic 텍스트박스 데모 Administrator 2019-12-29 644
327 InvalidOperationException: A second operation s... Administrator 2019-12-22 684
326 Blazor: 단일 파일 업로드 코드 조각 Administrator 2019-12-08 1505
325 [서평][도서] 홀로 성장하는 시대는 끝났다 Administrator 2019-10-27 811
324 CS0012: The type 'Object' is defined in an asse... Administrator 2019-10-26 749
322 "Unable to connect to the Web server 'IIS Expre... Administrator 2019-10-21 575
321 .NET Core 3.0 SDK 설치 Administrator 2019-09-23 758
320 자바(Java) 학습 개발 환경 구축 및 Git과 GitHub에 Java 리포지토리 ... Administrator 2019-08-09 595
319 알고리즘 기초 강의(part 2 of 12) - 개수 알고리즘(Count Algori... Administrator 2019-07-28 587
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home