(React & Express 를 이용한 웹 어플리케이션 개발하기) 5일차 - 간단한 State 활용 검색

www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/lecture/4150?tab=note

React & Express 를 이용한 웹 어플리케이션 개발하기 - 인프런

---

import React from 'react';

export default class ContactInfo extends React.Component {
    render() {
        return (
            <div>{this.props.contact.name} {this.props.contact.phone}</div>
        );
    }
}

출력해줄 Contact의 템플릿을 구현한다.

일반적으로 중복적으로 뷰에 보여줄 양식들은 하나로 관리하여 배열로 뿌려주는 듯함.

 

import React from 'react';
import ContactInfo from './ContactInfo';

export default class Contact extends React.Component {
    
    // 생성자에게 state를 생성하지만 react-hot-loader를 사용할때 
    // constructor를 재실행해주진 않는다.(새로고침해야함)
    constructor(props) {
        super(props);
        this.state = {
            // 검색에 사용될 state를 정의
            keyword: '',

            // 검색될 리스트
            contactData: [{
                name: 'Abet',
                phone: '010-0000-0001'
            }, {
                name: 'Betty',
                phone: '010-0000-0002'
            }, {
                name: 'Charlie',
                phone: '010-0000-0003'
            }, {
                name: 'David',
                phone: '010-0000-0004'
            }]
        };

        // 생성된 메소드에 this를 바인딩한다.
        this.handleChange = this.handleChange.bind(this);
    }

    // input에서 변경될때 마다 메소드의 이벤트를 실행해준다.
    handleChange(e){
        // 검색되는 값으로 keyword state 값을 변경해준다.
        this.setState({
            keyword: e.target.value
        });
    }

    render() {
        // 리스트에 뿌려줄 함수
        const mapToComponents = (data) => {

            // sort를 사용하여 리스트를 정렬해준다(유니코드)
            data.sort();

            // 리스트를 필터로 하여 입력된 값에 맞도록 %value%의 값만 찾아서 새로운 배열로 만들어준다.
            // toLowerCase 로 리스트의 name 값과 입력되는 input값을 서로 동일한 소문자 조건으로 비교해준다.
            // -1 초과 라는 뜻은 값이 1 or 0 라는 뜻이다.
            data = data.filter((contact) => {
                return contact.name.toLowerCase().indexOf(this.state.keyword.toLocaleLowerCase()) > -1;
            });

            return data.map((contact, i) => {
                return (<ContactInfo contact={contact} key={i}/>);
            });
        };
        
        return (
            <div>
                <h1>Contacts</h1>
                <input 
                    name="keyword" 
                    placeholder="Search"
                    value={this.state.keyword}
                    onChange={this.handleChange} />

                <div>{mapToComponents(this.state.contactData)}</div>
            </div>
        );
    }
}

constructor 생성자에 state를 정의하여 keyword, contactData 배열와 그 안에 name, phone 객체를 구현한다.

그 후 input 태그로 하여 입력받을 수 있게끔 하고 그 안에 onChange 속성으로 새로운 handleChage 메소드를 구현해준다.

 

handleChange 메소드는 발생된 이벤트의 target(여기서는 input 태그)의 value를 가져와 keyword state의 값을 변경해주는 역할을 해준다. 그러므로 input 태그에 키보드의 입력이 받을때 바로 input에 입력되는 것이 아닌 handleChange의 메소드가 먼저 실행되고 keyword의 state가 변경되어 value의 this.state.keyword에 적용되는 것이다.

 

또 state의 값이 변경될때마다 컴포넌트가 다시 실행되어 return 안에 JSX가 재실행되니 다시 mapToComponents 의 메소드가 실행되기 된다. 

 

기존의 리스트를 그대로 매개변수로 넣어주지만 리스트에 sort()를 적용하게 되고 filter를 사용하여 내부적으로 keyword state의 값과 indexOf(매개변수의 값이 문자열에 포함되어있다면)의 조건에 참이거나 같은 값만 새로운 배열로 만들게 된다. 

그렇게 생성된 배열을 화면에 출력하여 리스트에서 검색하는 것 처럼 보여줄 수 있는것이다.

 

import React from 'react';
import Contact from './Contact';

class App extends React.Component{

    render(){
        return (
            <Contact/>
        );
    }
}

export default App;

최종적으로 App.js 에서 Contact 컴포넌트를 출력하여 화면에 뿌려준다.