React - 음식 주문 폼

1. 주문옵션: 포장, 배달
   •   라디오버튼
   •   const [deliveryType, setDeliveryType] = useState("포장주문"); // 기본 값: 포장주문
2. 메뉴 선택: 치킨🍗 종류 선택
   •   체크박스 (전체선택)
   •   const [sideFoodCount, setSideFoodCount] = useState(0);
     // 기본 값: 메뉴 개수 0
   •   const options = useMemo(() => ["후라이드치킨",~,"숯불구이 소금/양념 반반"],[]);
     // 옵션들의 값 지정
   •   const [optionCheckeds, setOptionCheckeds] = useState(new Array(options.length).fill(false));
     // 옵션 선택에 대한 변수, 기본은 false!
   •   const toggleOptionCheck = useCallback((index) => {const newOptionCheckeds = optionCheckeds.map((el, _index) =>index == _index ? !el : el); setOptionCheckeds(newOptionCheckeds);},[optionCheckeds]);
     // 메뉴의 체크 선택과 해제
   •   전체 체크 > const btnAllChecked = useMemo(() => optionCheckeds.every((el) => el), [optionCheckeds]);
     // optionCheckeds가 변경 될 때 실행, optionCheckeds 배열을 기반으로 선택된 메뉴의 개수를 계산
     옵션을 직접 체크할 때 전체 선택이 되어있나 안되어있나를 확인하는거지! 
   •   const toggleAllChecked = useCallback(() => {
     if (btnAllChecked) { // 전부 체크 해제 해야함
     const newOptionCheckeds = optionCheckeds.map((el) => false); setOptionCheckeds(newOptionCheckeds);}
     else { // 전부 체크해제 해야함
     const newOptionCheckeds = optionCheckeds.map((el) => true);
     setOptionCheckeds(newOptionCheckeds);}}, [btnAllChecked, optionCheckeds]);
     
   •   체크 > const btnAllChecked = useMemo(() => optionCheckeds.filter((el) => el).length, [optionCheckeds]); // optionCheckeds가 변경 될 때 실행, optionCheckeds 배열을 기반으로 선택된 메뉴의 개수를 계산
3. 사이드메뉴 선택: 수량 증가/감소

• App > Order
• Order > 

* every(): 조건이 배열의 모든 요소에 대해 true를 반환

* filter(): 특정 조건을 만족하는 요소만 추출하여 새로운 배열을 생성