TIL 객체로 이루어진 배열중에 특정 key값만 의존성 부여하기

대충 다음과 같은 화면을 만들었다.(상품들은 더미데이터)

 

남은돈 계산 로직을 처음에는 아래와 같은 useEffect를 간단히 생각했는데,

const Home: NextPage = () => {

  
  const [purchases, setPurchases] = useState<Purchases>([
    {
      product: "과자",
      price: "2000",
    },
    {
      product: "사탕",
      price: "300",
    },
  ]);
 
  useEffect(() => {
    // 잔액계산 로직
    // purchase의 가격들을 다 더하고 totalPrice에 넣는다
    // 그 후에 salary에서 뺀다.
  }, [purchases]);

  return (
    <>
      ...
        <PurchaseList purchases={purchases} setPurchases={setPurchases} />
       ...
  );
};

이렇게 되면 상품명만 바뀌었을때 금액은 변함이 없어서 잔액계산을 할 필요가 없음에도 잔액계산로직이 실행이 되었다.

 

나는 사용금액에 변동이 있을때만 잔액 계산 로직이 실행되게 하고 싶었는데, 의존성배열에 purchases배열 모든 인덱스의 price값만 넣는 방법이 떠오르지 않았다.

 

전역상태관리를 사용하지 않으려고 계속고민하다가 "아 리액트는 단방향이잖아" 라는 생각이 들었고 결국 전역상태관리를 하기로 했다.

(useController같은 함수 하나 만들어서 상태끌어올리기를 하면 어찌어찌 가능할것같긴 했지만, 배보다 배꼽이 큰 복잡한 코드가 될 것 같았다.)

 

쓰기싫었지만 전역상태관리 사용

나약한 나의 지식으로는 전역상태관리를 사용할 수 밖에 없다고 생각했다.

 

그래서 결국 보일러플레이트가 가장 적은(내생각) 리코일을 이용했다.

 

손자 컴포넌트에서 가격이 변경된 상품의 인덱스를 (조)부모컴포넌트에서 useEffect 의존성배열에 넣어주었다.

 

const index = useRecoilValue(purchaseIndexState);

useEffect(() => {
    // 잔액계산 로직
    // purchase의 가격들을 다 더하고 totalPrice에 넣는다
    // 그 후에 salary에서 뺀다.
    console.log(purchases)
  }, [purchases[index].price]);

 

상품을 입력할때는 콘솔이 안찍히고, 가격을 입력할때만 콘솔이 찍히는 것을 볼 수 있다.

---

메모이제이션은 차차 하기로..