[React] useMemo()

React Hook

리액트는 컴포넌트들로 이루어져 있으며
컴포넌트에서 렌더링에 영향을 미치는 데이터가 상태이다.

따라서 리액트에서 상태 관리는 필수이며
컴포넌트의 생성 , 업데이트 , 제거 시점을관리하는 생명 주기 관리가 중요하다

이때 컴포넌트에서 상태(state)와 생명주기 기능을 사용할 수 있게 해주는 게 hook이다.
이번엔 그중 useMemo()에 대해서 알아보고자 한다.

---

useMemo()

성능 최적화를 위해 사용되는 훅으로
계산된 값을 메모이제이션하여 이전에 계산한 겂을 재사용할 수 있도록 한다.

📌메모이제이션
컴퓨터 프로그램이 복잡한 함수 호출의 결과값을 함수에 저장해놓고
같은 입력이 반복될 때 저장한 값을 반환하도록 하여 속도를 높이는 최적화 기술

현실 세계에서 요리를 할 때 레시피를 보는 것과 비유할 수 있다.
1. 맨처음 요리를 할 땐 전체 레시피를 보며 요리함
2. 2번째부터는 모르는 부분만 레시피를 보며 요리함
3. 익숙해지면 레시피를 보지 않고 요리함

따라서 계산을 최적화하고 불필요한 렌더링을 방지하는 효과를 얻을 수 있다.

  const isChecked = useMemo(() => {
    return checkedItems.includes(cart.id);
  }, [checkedItems, cart.id]);

isChecked는 useMemo 훅을 사용해서
선택한 아이템에 카드 id가 포함되어 있는 지 확인한다.

즉 어떤 사용자가 어떤 아이템을 cart에 담았는지 파악하는 로직이다.
useMemo를 사용함으로써 불필요한 렌더링을 없애 성능을 최적화하였다.