8. [ 기능 ] 선택한 selected State 를 바탕으로 값 filter하기

const [selected, setSelected] = useState<string>("탄수화물");
    const [foodsData, setFoodsData] = useState<FoodType[]>([
        {
            id: 1,
                    ...
            price: 1000,
        },
        {
            id: 2,
                    ...
        },
    ]);

    const [selectedFoods, setSelectedFoods] = useState<FoodType[]>([]);   // filter 될 FoodData

    useEffect(() => {       // filter 되는 로직
        setSelectedFoods(foodsData.filter((food) => food.majorNutri === selected));
    }, [selected]);

    return (
        <div className={styles.main_grid}>
            {selectedFoods.map((food) => (      // "selectedFoods" 로 Data 변경
                <FoodPreview
                key={food.id}
                id={food.id}
                    ...
                )


    ** 반드시 useEffect 를 사용하도록 하자.
    ** "추후 데이터"는, "FireBase" 에서 온 것을 "App.tsx" 에서 받아서, "리덕스 툴킷" 으로 넘긴 다음, 사용 할 것이다.

반드시 useEffect 를 사용하여, 무한 렌더링의 늪에 빠지는 일이 없도록 한다.

자꾸 까먹는다.