안경잡이개발자

18강 필터(Filter) 함수를 이용한 고객(Customer) 검색 기능 구현하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2019. 1. 22. 09:05
728x90
반응형

  이번 시간에는 필터(Filter) 함수를 이용하여 고객(Customer) 검색 기능을 구현하는 방법에 대해서 알아보도록 하겠습니다.


▶ App.js


  기본적으로 검색 창에 사용자가 입력한 문자열을 스테이트(State)에 반영하기 위해서는 다음과 같은 값 변경 처리 함수가 필요합니다. 바로 함수를 만들어 보도록 하겠습니다.


handleValueChange(e) {
let nextState = {};
nextState[e.target.name] = e.target.value;
this.setState(nextState);
}


  이후에 생성자(Constructor)에서 이를 바인딩(Binding) 처리해주시면 됩니다.


constructor(props) {
super(props);
this.state = {
customers: '',
completed: 0,
searchKeyword: ''
}
this.stateRefresh = this.stateRefresh.bind(this);
this.handleValueChange = this.handleValueChange.bind(this)
}


  이후에 <InputBase>에서 다음과 같이 작성합니다.


<InputBase
placeholder="검색하기"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
name="searchKeyword"
value={this.state.searchKeyword}
onChange={this.handleValueChange}
/>


  지금까지는 단순히 고객 스테이트가 변경되면 전체 고객을 바로 보여주는 식으로 코드가 동작했습니다. 이제는 전체 고객 컴포넌트를 생성하는 부분을 render() 함수의 가장 윗 부분에서 새롭게 명시해주도록 하겠습니다.


const filteredComponents = (data) => {
data = data.filter((c) => {
return c.name.indexOf(this.state.searchKeyword) > -1;
});
return data.map((c) => {
return <Customer stateRefresh={this.stateRefresh} key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />
});
}


  이후에 <TableBody> 부분을 다음과 같이 작성하면 됩니다.


<TableBody>
{this.state.customers ?
filteredComponents(this.state.customers) :
<TableRow>
<TableCell colSpan="6" align="center">
<CircularProgress className={classes.progress} variant="determinate" value={this.state.completed} />
</TableCell>
</TableRow>
}
</TableBody>


  마지막으로 새로운 고객이 추가된 경우 검색 창 내용도 비워질 수 있도록 처리하겠습니다.


stateRefresh() {
this.setState({
customers: '',
completed: 0,
searchKeyword: ''
});
this.callApi()
.then(res => this.setState({customers: res}))
.catch(err => console.log(err));
}


※ 실행 결과 ※



728x90
반응형
저작자표시 비영리 변경금지

'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글

17강 AppBar 및 웹 폰트를 적용하여 디자인 개편하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2019.01.04
16강 Material UI 모달(Modal) 디자인 구현하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2019.01.04
15강 고객(Customer) 정보 삭제 기능 구현하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2019.01.04
14강 부모 컴포넌트의 State 변경을 통한 고객 정보 갱신 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2019.01.04
13강 Express에서 파일 업로드 요청 처리 및 DB에 데이터 삽입 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (7) 2019.01.02

4강 고객 컴포넌트(Component) 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]

React와 Node.js로 만드는 고객 관리 시스템 개발 강좌2018. 12. 31. 08:33
728x90
반응형

  이번 시간에는 고객 컴포넌트(Customer Component)를 만들어 보는 시간을 가져보도록 하겠습니다. 말 그대로 한 명의 고객에 대한 정보를 보여주기(View) 위한 기능입니다. 기본적으로 React는 HTML 웹 문서를 효과적으로 보여주기 위한 라이브러입니다. 그래서 컴포넌트란 말 그대로 웹 문서에서 어떠한 내용을 보여주기 위한 기본적인 단위라고 이해하시면 됩니다.


※ Customer 컴포넌트 ※


  Customer 컴포넌트를 만들어 주도록 하겠습니다. 지금부터 만들 컴포넌트(Component)들은 하나의 공간에 모아 놓으려고 해요. 그래서 src 폴더에서 [New Folder]를 눌러 새로운 폴더를 만들어 주도록 하겠습니다. 이름은 components에요.


 


  이후에 다음과 같이 components 폴더에서 [New File]을 눌러서 Customer.js 컴포넌트를 생성해주도록 합시다.



  이후에 소스코드를 작성해주시면 됩니다.


  ▶ import: 특정한 라이브러리를 불러오기 할 때 사용

  ▶ export: 특정한 라이브러리를 내보내기 할 때 사용


  말 그대로 React Component 라이브러리를 사용하기 위해서 import 구문이 먼저 나와야 합니다. 그리고 나중에 다른 컴포넌트에서 지금 우리가 만든 컴포넌트를 사용하기 위해서는 export를 해주셔야 하는 거예요.



import React from 'react';

class Customer extends React.Component {
render() {
return (
<div>
<h2>홍길동</h2>
<p>961222</p>
<p>남자</p>
<p>대학생</p>
</div>
)
}
}

export default Customer;


※ App.js ※


  이제 App.js에서 방금 우리가 만든 Customer 컴포넌트를 사용하도록 해볼게요.


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';

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

export default App;


  이제 웹 브라우저를 확인해 보시면 다음과 같이 한 명의 고객에 대한 정보가 출력되는 것을 확인할 수 있어요.



※ Props를 이용해 구조화하기 ※


  이제 Props를 이용해서 App.js에서 데이터(Data)를 가진 상태에서 고객에 대한 정보를 출력하도록 구조화하도록 하겠습니다.


▶ App.js


import React, { Component } from 'react';
import Customer from './components/Customer'
import './App.css';

const customer = {
'name': '홍길동',
'birthday': '961222',
'gender': '남자',
'job': '대학생'
}

class App extends Component {
render() {
return (
<Customer
name={customer.name}
birthday={customer.birthday}
gender={customer.gender}
job={customer.job}
/>
);
}
}

export default App;


▶ Customer.js


import React from 'react';

class Customer extends React.Component {
render() {
return (
<div>
<h2>{this.props.name}</h2>
<p>{this.props.birthday}</p>
<p>{this.props.gender}</p>
<p>{this.props.job}</p>
</div>
)
}
}

export default Customer;


  실행 결과는 동일합니다. 기존에 객체 지향 프로그래밍을 해보신 분들이라면 현재의 소스코드가 그러한 객체 지향 프로그래밍의 구조를 정확히 잘 따르고 있다는 사실을 확인할 수 있을 거예요.

728x90
반응형
저작자표시 비영리 변경금지

'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글

6강 Material UI를 적용하여 테이블 만들기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31
5강 고객 컴포넌트 내용 분리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
2강 Visual Studio Code를 이용한 소스코드 작성 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (0) 2018.12.31
1강 Create React App으로 리액트 프로젝트 시작하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]  (1) 2018.12.31

티스토리툴바