[React] useEffect 사용하여 검색하기

    useEffect( () => {
        setData(user.filter(item => item.name.includes(text)))
    },[text])

 

user의 데이터를 filter하여 text에서 일치하는 검색어를 보여준다. -> (원본에서 검색)

user가 아니라 data로 filter를 하게 된다면, 원본에서 검색하는 것이 아니라 data안에서 검색하는거라

처음에만 일치하는 데이터가 나오고 두번째부터는 일치하는 데이터가 나오지 않는다!!!

 

import React, { useEffect, useState } from 'react';

const user = [
    { id:1 , name: '이나영'},
    { id:2 , name: '김태희'},
    { id:3 , name: '다음'},
    { id:4 , name: '네이버'},
    { id:5 , name: 'daum'},
    { id:6 , name: 'Naver'},
    { id:7 , name: 'GOOGLE'},
    { id:8 , name: '김다미'},
    { id:9 , name: '다람쥐'},
    { id:10 , name: 'TIGER'},
    { id:11 , name: '홍대'},
    { id:12 , name: '강남'},
    { id:13 , name: '영등포'},
]
const Test = () => {
    const [data, setData] = useState(user)
    const [text, setText] = useState('')

    useEffect( () => {
        setData(user.filter(item => item.name.toLowerCase().includes(text.toLowerCase())))
    },[text])

    return (
        <div>
            <input type="text" value={text}
            onChange={ e => setText(e.target.value)} />

            <hr />
            <ul>
                {
                    data.map(item => <li key={item.id}>
                        {item.id} / {item.name}
                    </li>)
                }
            </ul>
        </div>
    );
};

export default Test;

 

toLowerCate는 자바스크립트 문법인데

데이터를 모두 소문자로 변환시켜 일치하는 데이터가 나올 수 있도록 해준다.