• 오늘 뭐했지🥲
• 기억하세요 🥸‼️

…… ㅠㅠ……..

피자 토핑 갯수 제한 처리(논리적 접근)

조금더 생각해봐야 될거같음… 🫨 논리가 없네….

<aside> 👩‍🌾 DOM 요소(e.target)의 상태값을 통해 제어하는 것 보다, 리액트가 관리하는 상태로 제어하는 것이 좋음

</aside>

const handleChangePizzaToppings = (e) => {
    const { value: topping, /* checked: isChecked */ } = e.target;

    // 리액트 입장에서 현재 토핑 집합의 총 갯수
    const toppingsCount = orderState.toppings.length;

    // 리액트의 상태 업데이트 논리적인 흐름
    const isToppingChecked = orderState.toppings.includes(topping);

    // 만약 토핑 선택 갯수를 3개로 제한하는 경우, 조건 처리
    if (toppingsCount === LIMIT_TOPPING_COUNT && !isToppingChecked) {
      // 사용자에게 경고 메시지를 표시하고 상태 업데이트 중단(return : 함수 종료)
      return alert('현재(업데이트 전) 토핑 갯수가 3개입니다.');
    }

    let nextToppings = [];

    // 사용자가 눌렀을 때 체크되었다
    if (!isToppingChecked) {
      // 토핑 추가
      nextToppings = [...orderState.toppings, topping];
    } else {
      // 토핑 삭제
      nextToppings = orderState.toppings.filter((t) => t !== topping);
    }

    const hasFullFilledToppings = nextToppings.length === PIZZA.toppings.length;

    const nextOrderState = {
      ...orderState,
      toppings: nextToppings,
      isAllToppings: hasFullFilledToppings,
    };

    setOrderState(nextOrderState);
  };

• checkbox가 checked 되면 추가를 하는 것이 아니라, 추가가 된 뒤 checked가 되는 것이 리액트가 관리하는 상태로서 논리가 맞음 !

  ▶️이벤트를 발촉시키는 함수는 현재 상태가 아니라 다음 상태 = DOM의 현재 상태는 리액트의 다음 상태 !

side effect(부수효과)

<aside> 👩‍🌾 리액트 컴포넌트는 순수해야 됨 = 동일한 props라면 동일한 jsx를 리턴해야 됨

</aside>

: 렌더링 외적인 것들 비동기로 DOM을 다루고자 한다면 이건 리액트가 관여할 수 없는 부수효과라고 할수 있음

1️⃣ 함수 외부의 변수 사용

let renderCount;
function Exercise(){
	renderCount += 1
}

2️⃣ DOM요소 접근, 조작 : 웹 문서(DOM)에서 버튼을 찾아서 스타일링 또는 이벤트 핸들링 하는 것(gsap, swiper 등 돔기반 라이브러리)

function Exercise(){
	document.querySelectorAll('.button').forEach((button) => {
		button.style.cssText = `color: #2481af`;
}

3️⃣ 비동기처리 : 지연된 시간이 지난 후 어떤 값을 변경하는 경우

function Exercise(){
	 setTimeout(() => {
		renderCount += 10;
		console.log('1초가 지나 renderCount 값이 +10 되었습니다.');
		console.log(`renderCount = ${renderCount}`);
		}, 1000);
}

4️⃣네트워크 요청/ 응답 : 네트워크를 통해 서버에 요청하여 응답되기 까지 시간이 요구되나, 리액트의 렌더링 프로세스는 동기적 처리