state를 이용한 카테고리 기능 사용하기

꿀팁 리스트에서 생활,재테크, 반려견 등 버튼에 따라 보여지는 리스트를 다르게 보여주기 위함!

 

1. const [cateState, setCateState] = useState([])

카테고리에 따라 다른 꿀팁들을 보여주기위해 그떄그때 저장 관리할 상태 

 

2.  useEffect(()=>{         

    //뒤의 1000 숫자는 1초를 뜻함     

    //1초 뒤에 실행되는 코드들이 담겨 있는 함수     

           setTimeout(()=>{       

           //꿀팁 데이터로 모두 초기화 준비         

                   let tip = data.tip;         

                   setState(tip)         

                   setCateState(tip)        

                   setReady(false)     

              },1000) 
       },[])    

 

3. const category = (cate) => {       

           if(cate == "전체보기"){             

              //전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로다시초기화                           

              setCateState(state)         

            }else{ 

              setCateState(state.filter((d)=>{                 

                  return d.category == cate             

}))        

 }    

 } 
 
 

4.  onPress={()=>{category('전체보기')} 

버튼에 onPress로 연결해주자.

 

그럴경우 category 함수가 실행이 될 것이고, 실행된 값이 전체보기가 아니라면 filter 함수를 통해 특정 조건에 맞는 카테고리 내용만 골라서 보여줄 수 있게된다!