• pixabay-api

 

pixabay-api

https://pixabay.com/api/docs/

 

Pixabay API Documentation

lang str Language code of the language to be searched in. Accepted values: cs, da, de, en, es, fr, id, it, hu, nl, no, pl, pt, ro, sk, fi, sv, tr, vi, th, bg, ru, el, ja, ko, zh Default: "en" category str Filter results by category. Accepted values: backgr

pixabay.com

 

픽사베이 api를 이용해 데이터를 화면에 출력해 주고 검색기능을 통해 원하는 사진을 출력하게 해 보았다.

 

    useEffect(() => {
        const API_KEY = 'KEY'
        const url = `https://pixabay.com/api/?key=36039320-c68a09919d89ffbf64dc4bb64&q=${keyword}&image_type=photo`
        axios.get(url)
            .then(res => {
                setData(res.data.hits)
                setLoading(true)
                setError(null)
            })
            .catch(error => {
                setData([])
                setLoading(false)
                setError('-- ERROR --')
            })
    }, [keyword])
    const [keyword, setKeyword] = useState('tiger')

 

초기 키워드는 tiger로 설정해 두었다.

 

pixabay

const GallerySearch = ({ onSubmit, changeInput, text }) => {
    return (
        <GallerySearchForm onSubmit={onSubmit}>
            <input className='imput' type='text' value={text} onChange={changeInput} />
            <button className='btn' type='submit'>search</button>
        </GallerySearchForm>
    );
};

export default GallerySearch;

 

form 안에 text를 받는 input을 이용해 value값을 가져와 원하는 키워드로 검색이 가능하게 했다.

onChange가 되면 text의 값을 바꾸어 주고 form을 submit 하면 키워드 값을 text로 바꿔준 뒤 input에는 공백이 들어가게 해 준다.

 

    const onSubmit = (e) => {
        e.preventDefault();
        if (!text) return
        setKeywordArr([
            ...keywordArr,
            {
                id: keywordArr.length + 1,
                text
            }
        ])
        setKeyword(text)
        setText('')
    }
    const changeInput = (e) => {
        setText(e.target.value)
    }

 

setKeywordArr의 경우 검색 내역을 남기기 위해 추가했는데 기존의 객체에 추가되도록 해 보았다.

 

setKeywordArr

const GalleryKeywords = ({ keywordArr,onDel }) => {
    return (
        <GalleryKeywordContainer className='keywordbox'>
            <ul className='keywordul'>
                {
                    keywordArr.map(item => <li key={item.id} className='keywordli'>{item.text}<button className='del' onClick={()=>onDel(item.id)}>X</button></li>)
                }
            </ul>
        </GalleryKeywordContainer>
    );
};

export default GalleryKeywords;

 

검색 내역을 나열할 때 삭제 버튼도 추가해 X 버튼을 누르면 해당 검색 내역이 지워지게 된다.

티스토리툴바