목표

품절상품의 useState, handle 이벤트 함수를 생성한다.
sub-page 의 품절상품제외 버튼을 클릭시
productlist의 배열들을 삼항연산자 기능을 사용하여 filter기능을 적용한다.

폴더구조

--component
---layout
-----sub.js //기본 서브페이지 레이아웃 (필터링 포함)

---routes
----productlist.js //상품 배열담긴 파일

기본데이터 구조

item 데이터가 담겨져 있는 배열을 App> subpage > productlist props전달

APP.JS

 const { item_id } = useParams();
 const [items, setItems] = useState(manData);
 
     <Route
         path="/Sub"
         element={<SubPage items={items} />}
     ></Route>

Sub.js

export default function SubPage({ items }) {

<Productlist
  items={items}
}

productlist.js

export default function ProductList({
    items,
})

품절상품제외버튼 클릭 핸들러 생성

• excludeSoldOut(true) : 품절상품제외 선택됨 (필터링 적용됨)
  === !excludeSoldOut
• excludeSoldOut(false) : 풀정상품제외 선택X (모든상품 보여줌)

// 기본상태는 필터링 기능 적용x (품절된상품 포함, 모든상품 보여줌)
 const [excludeSoldOut, setExcludeSoldOut] = useState(false);

//클릭시 품절상품을제외한 상품만을 보여주는 핸들러 작성 
 (필터링 적용됨)
    const handleExcludeSoldOut = () => {
        setExcludeSoldOut(!excludeSoldOut);
    };

onclick 핸들러함수 적용

필터기능 생성

핸들러가 발생할때의 상태값(excludeSoldOut) 필터링 생성한다.

• excludeSoldOut,
  handleExcludeSoldout props전달 받아오기

💡 삼항연산자 기본문법

조건식 ? 참일때 실행되는 값 : 거짓일때 실행되는 값

• 필터링 off 즉, excludeSolout(false) 은 : 뒤의 값이 실행되어 전체배열 (items)를 보이게 한다.
• 필터링 on은 !excludeSoldot(true) 으로
  배열중 품절상품데이터가 false 즉, (!issoldout)인 상품만 필터링하여 나타나게 한다.
• map 함수를 사용하여 filterSoldout 배열 돌리면 끝

 const filteredSoldout = excludeSoldOut ? items.filter((item) => !item.issoldout) : items;