import React, { useEffect, useState } from 'react'; import styles from './product_list.module.css'; import Product from './product_item/product_item'; const ProductList = ({products}) => {         const [filterDisplay, setFilterDisplay] = useState('none');     const filterHandler = () => {         if (filterDisplay === 'none') {             setFilterDisplay('display');             console.log(filterDisplay);         } else {             setFilterDisplay('none');             console.log(filterDisplay);         }             }     return (         <section className={styles.product_list}>             <button onClick={filterHandler} className={styles.filterBtn}><i className="fas fa-filter"></i></button>             <div style={{                 display: filterDisplay,             }} className={styles.filterBox}>                 <div className={styles.bikeBox}>                     <button className={styles.bikeBtn}>MTV</button>                     <button className={styles.bikeBtn}>하이브리드</button>                     <button className={styles.bikeBtn}>로드바이크</button>                 </div>             </div>             {/* <button className={styles.btn_regiprod}>버튼</button> */}             {                 products.map(product =>                     <Product                         key={product.id}                         product={product}                     />                 )             }         </section>     ) }; export default ProductList;   해당 코드입니다. filterHandler()함수가 작동하면   하단 div의 스타일 display 속성값이 display로 바뀌어서 박스가 보였다 안보였다하게 만들고싶은데,   콘솔에는 변경된 state가 나오는데 실제로 작동이 안되네요... 해결법있을까요?

예전 리액트에서는 앱 인스톨만해도 서비스 워커스라는 파일이 있던데 요즘은 업데이트 되면서 사라진건가요??