sort / filter를 이용한 검색 소개

주소록 검색 기능 구현 

---

sort 기능 

: 배열 요소 내의 데이터들을 오름차순 또는 내림차순으로 정렬하여 뿌려준다.

---

단어 배열 

var fruits = ['apple','banana','cherry'];

다음과 같은 글자로 되어 있는 배열 같은 경우는 unicode로 비교하여 정렬하게 됩니다.

오름 차순 : 배열이름.sort();

내림 차순 : 배열이름.sort();

fruits.sort(); 

결과 : [apple,banana,cherry]

fruits.reverse();

결과 : [cherry,banana,apple]

---

숫자 배열

var numbers = [1,2,3,4,5];

다음과 같이 숫자로 되어 있는 배열은 sort의 인자로 callback함수를 주어서 정렬해야한다.

(es5) 

function sortingNumbers1(a,b){

return a-b;

}

numbers.sort(sortingNumbers1); 

오름차순 결과로 출력

(es5)

function sortingNumbers2(a,b){

return (a-b) * -1;

}

numbers.sort(sortingNumbers2); 

내림차순 결과로 출력 

// a-b > 0 이면 1 반환

// a-b < 0 이면 -1 반환

// a-b = 0 이면 0 반환 

(es6) 

var sortingNumbers1 = (a,b) => {

return (a-b);

}

var sortingNumbers2 = (a,b) => {

return (a-b) * -1;

}

---

Object 정렬

var objectArray = [ { name : 'haams' , age : 27 } , { ~~ : ' ~~ ' , ~~ : ~~ } , ... ] ; 

다음과 같이 객체로 정해진 배열일 경우 각 요소별로 접근할 수 있다.

objectArray.sort(function(a,b){ return (a.name - b.name) });

앞 객체의 name 값과 뒤 객체의 name 값을 비교해서 

1이 반환될 경우 오름차순으로 진행 

-1이 반환될 경우 내림차순으로 진행 

---

filter 기능 

: 기존 배열 요소를 callback 함수를 통해서 필요 요소들만 뽑아

새로운 배열을 만든다.

(es6)

var morethan10 = (data) => {

return data > 10;

}

var numbers = [1,2,8,12,34,75];

numbers.filter(morethan10);

[결과]

: [12,34,75]

기존 numbers라는 배열에 filter 기능을 부착하여 콜백 함수인 morethan10을 추가해줌으로써 10 이상의 값만을 뽑아 새로운 배열을 만들어 반환하게 된다.

---

sort 함수와 filter 함수를 간략하게 설명드렸는데, 이를 활용해서 주소록 검색 내용을 만들어 보겠습니다.

핵심 과정은 다음과 같다.

• 클래스를 랜더링 할 때 그 안에 JSX 문법에 맞게 input 태그를 넣어준다. 
• 입력되는 값은 state 값으로 하여 유동적으로 사용할 수 있도록 한다.
• onChange 함수를 활용하여 this.setState로 state 변수 값을 변화시킬 함수를 추가해준다.
• 변화를 줄 함수에서는 event의 타겟이 되는 값을 넘겨주도록 한다. 

render() {
    const mapToComponent = (data) =>{
        data.sort((a,b) => { return a.name > b.name;});
        data = data.filter((contact) => {
            return contact.name.toLowerCase().indexOf(this.state.keyword) > -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}
                // onChange는 자바스크립트 함수! (값이 변화할 때 호출되는 메소드)

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

다음은 한 클래스의 rendering 부분이다.

return 값에 <div> 태그로 묶인 형식을 볼 수 있다. (JSX문법)

내부엔 input 태그를 통하여 값을 넣어주는데, value값을 확인해보자

input태그로 들어올 값은 value이며 해당 값은 keyword라는 state 변수의 값이다.

onChange함수를 통해서 state 변수의 keyword 값을 변화시킬 것이다.

변화시킬 함수는 handleChange라는 함수다.

그리고 기본적으로 mapToComponent의 인자로 들어있는 state 변수인 contactData가 우리 눈에 보여지게 될 것이다. 

mapToComponent 함수로 가보자

여기서 인자로 받는 data는 contactData의 state 값이며 contactData는 

name과 phone을 각각 키로 갖는 Object 형태의 배열이 된다.

따라서 data.sort( (a,b) => { } )로 진행하게 되면 contactData를 직접 접근하기 때문에,

a.name과 b.name 또는 a.phone , b.phone 과 같이 접근할 수 있게 된다.

오름 차순으로 먼저 정리해주고 다음에는 data값을 filter를 통해 작업한다. 

filter의 콜백 인자로 들어온 contact라는 값은 input으로 들어올 값과 비교할 대상이 된다. 

즉, 처음에 미리 입력된 주소록 정보과 될 것이다.

주소록 정보에서의 name값을 따로 추출해 내 소문자로 만든 뒤 state의 변수인 keyword 값과 비교한다. 

-1 보다 크다고 설정했기 때문에 처음부터 비교하면서 인덱싱 작업을 거친다.

입력한 값 (state변수인 keyword 값)과 기존에 입력되어 있는 값
(contactData 내의 값 >> 여기선 filter의 콜백 인자로 들어온 contact을 가르킨다.) 

같을 경우 필터링을 통하여 값을 넘긴다. 

다음과 같이 필터링이 된 data값을 가지고 매핑을 통하여 contactData에서 찾게 된다. 

(ContactInfo 의 props 값인 contact 값을 가지고 변경하기 때문)

내용이 조금 심오합니다. 하지만 기존 구조를 익히고 앞에 살만 더 붙인 내용이기 때문에 조금은 이해할 수 있을거라 생각합니다.

https://github.com/Haamseongho/React_Study/tree/haams/contact