배경

예전에 구매수량에 따라 결제금액이 달라지는 기능을 만든적이 있다

그런데 아래코드 보면 알 수 있듯이
useState의 set 함수를 써서 결제 금액 상태를 업데이트한게 아니라
그냥 일반 변수로 해결했다

const totalPrice = parkingTickets.reduce(
	(sum, ticket) => sum + ticket.price * ticket.amount,0
);


return (
	<button>{totalPrice} 원 결제하기</button>
);

근데 리액트는 상태가 바뀌어야 UI가 바뀌는 거 아닌가?
왜 일반 변수인데도 UI가 바뀌는걸까?

일반적인 React의 UI 업데이트

일반적으로 리액트에서 UI가 업데이트 되는 원리

상태가 바뀐다 → 컴포넌트 리렌더링 → 바뀐부분만 UI 업데이트

이건 왜 가능할까

바로 리액트의 렌더링 원리를 이용한 것이다
다시 코드를 살펴보면

const totalPrice = parkingTickets.reduce(
	(sum, ticket) => sum + ticket.price * ticket.amount,0
);

totalPrice 변수가 상태 parkingTickets 의존한다
앞에 얘기했듯이, 리액트에서는 상태가 바뀌면 컴포넌트가 리렌더링된다
그리고 리렌더링 될때 이 계산도 다시 실행되기 때문에 최신값으로 UI에 반영될 수 있는 것이었다

❌ 이건 과한 코드

한번 totalPrice 를 상태로 만들어보자

const [totalPrice, setTotalPrice] = useState(0);

useEffect(() => {
  setTotalPrice(
    parkingTickets.reduce(
      (sum, ticket) => sum + ticket.price * ticket.amount,
      0
    )
  );
}, [parkingTickets]);

코드도 더 복잡해지고, 관리할 상태가 하나 더 늘어났다
'사용자의 직접 입력'이나, '외부 이벤트로 바뀌는 값'에만 상태로 만들고
다른 상태로 부터 계산 가능한 값은 변수로 해결하자