Component 분리 → 검색기능 구현 1

검색기능구현을 위해 최근 검색어가 없습니다. 라는 멘트를 검색을 했을때 없애는 방법을 알아보느라 일주일이 지난 거 같다. 그때 component 를 이용하여 분리 할 수 있다는 것을 배웠다.

📌 Search 폴더 안에 component 라는 폴더를 만들어 그 안에 내가 만들고 싶은 페이지의 폴더를 만들고 그 안에 js 파일을 만들어 줬다.

import React from 'react';
import styled from 'styled-components';

const SearchItem = () => {
  return (
   // 필요한 코드
  );
};

// styled component

export default SearchItem;

📌 React 와 styled components 를 import 해주고 마지막에 export default 해주면 된다.

📌 부모 component 로 돌아와 상단에 import 해준다.

📌 useState 를 사용하여, mockData 를 받아 올 함수와, input value 값을 저장해 주는 함수를 만들어 줬다.

📌 input 창에 저장되는 value 값을 저장하는 inputWord라는 state 를 가져와 length를 계산하는 함수를 만들어 주었다.

📌 inputValue 값을 저장하는 inputWordSearch 라는 함수와, mock데이터를 가져오는 fetch 문에 setSearchList 에 담았다

{inputLength === 0 ? (
          <SearchItem />
        ) : (
          productList.map(product => (
            <ProductItemList key={product.producttypeId}>
              {product.name}
            </ProductItemList>
          ))
        )}

📌 3항 연산자를 사용하여 가져왔다.

• input에 아무 값도 없을 때

• input에 값이 있을 때

→ 이제 할 일은…검색한 글자와 데이터의 글자가 같으면 나올 수 있도록…해줘야 한다….😵‍💫

💥Blocker

{productList.map(product => {
          return inputLength === 0 ? (
            <SearchItem />
          ) : (
            <ProductItemList>{product.name}</ProductItemList>
          );
        })}

→map 함수 안에서 3항 연산자를 돌렸더니, mock데이터는 잘 가져오지만, input창에 value가 없을 땐…오류가 발생한다.

{inputLength === 0 ? (<SearchItem/>) : ({productList.map(product => {
          return(
            <ProductItemList>{product.name}</ProductItemList>
          )
        })})

→ 그냥 오류나는 친구