[14기 과제] React 디버깅

7주차 과제는 Github에 올라온 5가지 파일의 각 problem을 해결하는것이었다.

React를 포함한 프론트엔드 개발을 배운지 얼마 되지 않았기에, 사실 모든 문제들이 어려웠지만.. 그중에서도 인상 깊었던 Problem 5를 다루고자 한다.

5번 문제의 가장 큰 에러는 상품을 (ex. 후드티) 찜 했음에도 불구하고, 상단 탭에 찜이 반영 안되는 문제였다.

데이터를 컴포넌트 안에 가두어 실행될때마다 컴포넌트를 독립적으로 실행하는 useState과 달리, Zustand는 바깥쪽에서 컴포넌트들이 닿을 수 있도록 만드는 코드이다.

#

즉, 기존 useFavorite hook은 useState를 사용했기에 Header와 ProductCard 사이의 데이터가 달랐던것이다.

아래가 수정된 코드이다. Zustand는 외부에서 공용 "창고"를 짓는 개념이기에, 첫줄에 {create} from 'zustand'라고 적어야한다. (9째 줄까지 Zustand 생성 코드)

3번째 줄 부터 나오는 const useStore = create<{ ... }> 는 어디서든 꺼내 쓸 수 있는 useStore을 만드는것이고, < > 내부에는 데이터들의 '형태(타입)'를 미리 정의한다.

setFavorites: (updater: (prev: number[]) => number[]) => void; 위 코드는, 이전 목록(prev)을 주면 새로운 목록을 반환하는 함수(updater)"를 입력값으로 받겠다는 의미이다.

맨 마지막 줄이 사실상 동작을 담당하는 부분으로, updater 함수에 현재 저장된 즐겨찾기(state.favorites)를 집어넣어 계산된 결과로 favorites 값을 업데이트하는것을 의미한다.

위 코드의 결과로, 이전에는 반영되지 않았던 오른쪽 위의 "찜 카운터"가 반영되기 시작한것을 볼 수 있다.