네이버 쇼핑 API를 이용해서 검색기능 구현하기

API 데이터 불러오기를 진행한 뒤 검색 기능 구현하기

우선 input 태그에 text를 입력하고 버튼을 눌렀을 때 그 이벤트 값이 GET요청을 보낼 때 필요한 prams의 query요소를 변경시키도록 진행했습니다. 그리고 query의 값인 스테이트 item의 값이 변경될때마다 화면을 렌더링 하기위해 useEffect를 사용했습니다.

const [item, setItem] = useState("모자"); //api문서에 디폴트 값이 없기때문에 모자라고 설정해두었습니다.
//...
.get(URL, {
        params: {
          query: item,
          display: 100,
        }, 
//...
   useEffect(() => {
    shoppingData();
    focusRef.current.focus();
  }, [item]);

  const handleOnSubmit = (e) => {
    e.preventDefault();
    setItem(e.target.title.value);
  };

//...

<form onSubmit={handleOnSubmit}>
        <input
          ref={focusRef}
          type="text"
          placeholder="제품명"
          name="title"
          className="search--product"
        ></input>
        <button type="submit" className="search--button">
          <i className="fa-solid fa-magnifying-glass"></i>
        </button>
</form>
 

검색으로 변경되는 데이터를 li 태그에 뿌려주기

불러오는 상품의 이름에 <b> 태그가 포함되어 있었고 이름의 길이 또한 제각각이었기 때문에 replace와 slice 메서드를 이용해서 좋은 UI/UX를 노력했습니다.

<section>
        <div className="product--container">
          <ul className="products">
            {data.map((el) => {
              let title = el.title.replace(/\<b>/g, "");
              title = title.replace(/\<\/b>/g, "");
              let dotTilte = title.slice(0, 12) + " ...";
              return (
                <a href={el.link} key={el.productId}>
                  <li className="product--list" title={title}>
                    <div className="product--img--container">
                      <img src={el.image} className="product--img"></img>
                    </div>
                    <div className="product--name">{dotTilte}</div>
                  </li>
                </a>
              );
            })}
          </ul>
        </div>
 </section>

CSS는 상품 리스트를 도감?카드?느낌으로 구현을 진행하였고
display flex와 flex-wrap을 이용해서 반응형 웹으로 구현하였습니다.

---

다음 목표

1. 목록 탭을 만들어 각 품목의 버튼을 누를시 검색할 필요없이 자동으로 필터링 구현
2. 최근 검색 기록을 드롭다운의 형태로 구현
3. 처음 렌더링할 때 로딩화면 구현