리액트 프로젝트 2. 상품 리스트 , 검색과 카테고리 분류

 

ProductList [/goods/:category]

 

처음에는 메뉴를 구성하는 객체를 map 을 통해 

 

메뉴바를 구성해준 뒤 , 

<div className='productMenu'>

    {productMenu.map((items, i) => (
    	<NavLink to={`/goods/${items.category}`} key={i}>{items.description}</NavLink>
    ))}
</div>

 

useParams를 통해 값을 받아온다.

    const { category } = useParams();

 

 

goodsItem 의 복사본을 형성한 후 ,

let filteredItems = GoodsItems.slice();

.filter((items) => items.category === category);

filter을 통해 item을 정리한후 결과 값이 나오는 하위 컴포넌트로 전달하는 

간단하다면 간단한 메뉴바의 구성이였다.

 <ProductListResult selectItem={selectItem}/>

---

하지만 리스트에서 가장 중요한부분이

 

페이지 네이션 과 검색 엔진이라고 생각한다.

현재 컴포넌트에서는 검색엔진을 형성해야 했었다.

 

메뉴바에 검색엔진을 추가로 넣으니 

메뉴바와 검색엔진이 결과 값이 충돌하는 현상이 존재하여  메뉴바 검색엔진 둘중 하나만 보일 수 있게 준비해봤다가

현재는 합쳤다.

<select name="productSearch" id="productSearch"
    value={filterItem.selectValue}
    onChange={onChangeSelectValue}>
    {productMenu.map((items, i) => <option value={items.category} key={i}>{items.description}</option>)}
</select>

<select name="productSort" id="productSort"
    value={filterItem.sortOption}
    onChange={onChangeSortOption}>
    {sortOptions.map((items, i) => <option value={items.value} key={i}>{items.label}</option>)}
</select>

<input type="text" name="productInput" id="productInput"
    value={filterItem.inputValue}
    onChange={onChangeInputValue} />
<button
    onClick={onclickSearch}>검색</button>

 

초기값으로 먼저 보여줄 값들을 고정했다.

이 값은 원하는대로 바꿀 수 있었으며 ,

나는 select의 가장 위에 값을 넣어주게 되었다.

    const [filterItem, SetFilterItem] = useState({
        selectValue: 'allGoods',
        sortOption: 'count',
        inputValue: '',
    });

 

이 filterItem의 속성들로  filter를 거르는 함수를 만들었다.

물론 처음에는 클릭이벤트 안에 있었지만 , 추후에는 함수로 빼게 되었다.

 

filterItems 라는 함수를 만들어 , 

state 값의 속성이 이거면 ~ 필터를 어떻게 하겠다는 조건들을 달게 되었는데.

 

가장 중요한 요점은 3가지였다

1.allgoods 의 필터링은 어떻게 할것인가. 그런 분류로 따로 두지 않았는데 카테고리가 생기는 것이였다.

2.input창의 빈문자열일 경우 어떻게 할것인가.

3. 그러다가 카테고리를 다시 누르면 어떻게 할것인가.

 

예외처리는 항상 반대상황도 염두해야한다는 생각을 하게되었다.

1. goodsItem의 복사본을 만들어 필터하는데,

2.allgoods가 아니면 내가 원하는데로 카테고리를 타고 필터링 하면되고,

3.input창에 입력이 들어왔을때 필터링 하면되고,

4.옵션에 따라 마무리하여 필터링 하면된다.

        let filteredItems = GoodsItems.slice();

        if (filterItem.selectValue !== 'allGoods') {
            filteredItems = filteredItems.filter((items) => items.category === filterItem.selectValue);
        }
        if (filterItem.inputValue !== '') {
            filteredItems = filteredItems.filter((items) => items.name.includes(filterItem.inputValue));
        }
        
        ....
        ....
        ...

 

 

그렇다면 allgoods는 goodsItem의 복사본인 그대로 떨어지게 되고,

input창에 입력이 없다면 없는대로 그대로 떨어지게 된다.

 

그 값들을 useEffect를 통해 동기적인 상황을 만들어서 카테고리 값이 변경됬을때 (메뉴바를 클릭했을때)

카테고리를 다시 url의 값에 일치하는 item들을 다시 필터링 해주면 된다.

 

    useEffect(() => {
        setPage(1);
        SetFilterItem({
            selectValue: 'allGoods',
            sortOption: 'count',
            inputValue: '',
        });
        const filteredItems = filterItems();
        const categoryFilteredItems = filteredItems.filter((items) => items.category === category);
        setSelectItem(categoryFilteredItems);
        
        ..
        ..

 

그리고 검색 결과를 보여주기 위한 state 값으로 문구를 넣어두고 검색을 눌렀을때

표현 하기 위한 메세지도 포함시켰다.

            setDisplayMessage(<>
                <span className='NamedCategory'>카테고리:</span>
                <span className='NamedInfo'> { selectedCategory.description}</span>

                <span className='NamedCategory'>정렬:</span>
                <span className='NamedInfo'> {selectedSortOption}</span>
                {count !== undefined && (
                    <>

                        {count > 0 ? (
                            <span className='searchResult'>: 검색결과: {count}개</span>
                        ) : (
                            <p>검색결과가 없습니다. 추천상품을 안내해드리겠습니다.</p>
                        )}
                    </>
                )}
            </>);

 

 

 

 

 

 

 

 

{selectItem.length > 0 ? 
<ProductListResult selectItem={selectItem} category={category} page={page} setPage={setPage} /> 
: <ProductListResult selectItem={GoodsItems.sort((a, b) => b.count - a.count)} page={page} setPage={setPage} />}