React 검색창(searchBar) useEffect fetch api : json 데이터

검색창에서 조건 검색할 데이터를 임시로 searchItems 라는 이름의 변수에 직접적으로 리스트 데이터를 직접 선언했다가 나중에 데이터를 api 를 통해서 가져오기 위해서 주석처리를 하고  useEffect 를 사용하여 데이터를 세팅해주는 방법입니다.

 

fetch 함수에 url 주소를 넣어주면 데이터를 자동으로 가져오게 됩니다. 그러면 .then 함수를 이용하여서 변수명 res 으로 받아서 json함수로 하여서 데이터를 json 으로 변환하게 됩니다. 그리고 json 으로 변환된 데이터를 변수명 productArray 으로 받아서 사용하게 됩니다. 참고로 변수명은 임의로 변경이 가능합니다.

 

배열 데이터는 map 함수로 특정 데이터만 추출이 가능한데요. map 함수가 실행이 되면서 json 형태의 데이터의 수 만큼 반복이 될때에 하나의 데이터를 product 라는 이름으로 받아서 거기서 title 값만을 리턴 시키게 됩니다. 그러면 제품의 타이틀 값만 모두 반환을 하게 됩니다.

 

이렇게 반환된 배열 즉 리스트 값을 변수명 searchItem 에 할당이 되게 되는데요. 그 값으로 searchItems 를 설정하기 위해서는 setSearchItems 를 호출해야 합니다. 참고로 setSearchItems 는 예약어가 아닌 useState 를 하였을때에 반환된 함수 포인터라고 생각하시면 될것 같습니다. 그리고 setSearchItems 함수가 실행될때 그 값이 저장이 될 변수명은 searchItems 이라고 이해하시면 됩니다.

 

React 에서 검색창(search bar) 구현

 

---

App.js

 

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

import './App.css';

import MyButton from './component/MyButton/MyButton';

import MySearchBar from './component/MySearchBar/MySearchBar';

 

function App() {

 

  let subject = 'My React';

  // const searchItems = [

  //   "desktop",

  //   "notebook",

  //   "smart phone",

  //   "clock",

  //   "chair",

  //   "iPad"

  // ]

 

  const [searchItems, setSearchItems] = useState([])

 

  useEffect(() => {

    

    console.log("useEffect in App.js called")

    console.log(

      fetch("https://fakestoreapi.com/products")

      .then((res)=>res.json())

      .then((productArray) => {

        console.log(productArray)

        const searchItems = productArray.map((product) => {

          return product.title

        })

        setSearchItems(searchItems)

        

      })

    )

  }, [])

  

  return (    

    <div className="App">

      

      {subject}

      

      {searchItems.length>0 ? <MySearchBar searchItems={searchItems} /> : "Loading.."}

      <MySearchBar searchItems={["apple", "banana", "watermelon", "melon"]}/>

       

 

    </div>

    

  );

}

 

export default App;

 

 

---

MySearchBar.js

 

import React, { useState } from "react"

import './MySearchBar.css'

 

const MySearchBar = (props) => {

 

    const products = props.searchItems;

 

    // console.log(global);

    const [searchValue, setSearchValue] = useState("");

 

    const handleInputChange = (event) => {

        // console.log(event.target.value);        

        setSearchValue(event.target.value)

    }

 

    const shouldDisplayButton = searchValue.length > 0;

 

    const handleInputClear = () => {

        setSearchValue("")

    }

 

    // products.map((product) => {

    //     console.log(product);

    // });

 

    const filteredProducts = products.filter((product) => {

        return product.includes(searchValue);

    })

   

 

    return(

        <div className="searchBar">

            <input type="text" value={searchValue} placeholder="search value" onChange={handleInputChange} />

            {shouldDisplayButton && <button onClick={handleInputClear}>clear</button>}

            

            <ul>

                {filteredProducts.map((product) => {

                    return (<li key={product}>{product}</li>)

                })}

            </ul>

 

        </div>

    )

    

}

 

export default MySearchBar;

---

MySearchBar.css

 

.searchBar {

    padding:5px;

    border:1px solid #efefef;

    margin:5px;

}

 

.searchBar ul li {

    text-align:left;

    text-decoration:none;

}