장바구니 미션을 하고 있고, 상품 목록 페이지를 만들었다. 그리고 장바구니 페이지를 만들기 위해 checkbox 컴포넌트를 만들다가 checkbox를 커스텀 하게 디자인하기 위해서 체크 모양 svg도 만들어야 하고, checkbox를 안 보이게 하고 checkbox 모양을 한 div로 흉내를 내는... 이런 것을 하다가 페어가 약속이 있어서 일찍 끝냈다. 그래도 checkbox와 input type=number의 arrow(?)를 혼자 구현해놓아서 내일 시간을 아낄 수 있게 되었다.
페어가 약속이 있어서 내 시간이 생겼다. 오늘은 페이먼츠 미션 피드백을 반영했는데, 커스텀 훅을 왜 사용하는지에 대해 어렴풋이 알게 된 것 같아서 기분이 좋다. 아직 확실하진 않지만 구현하면서 느낀 것은 추상화의 도구라는 생각이 들었다. 바닐라 자바스크립트를 할 때 중복되는 코드가 있으면 추상화를 해서 하나의 함수로 만들어서 사용했던 것처럼(httpClient) 상태를 가지고 있는 중복되는 함수를 하나의 커스텀 훅으로 추상화를 하는 것이다.
난 useModal을 만들었는데, useModal은 isOpened라는 상태를 가지고 있고, 모달을 열기 위한 openModal, 모달을 닫기 위한 closeModal 함수를 가지고 있다. 만약 useModal이 없을 때, 모달을 3군데에서 사용한다면 각각의 사용처에서 isOpened와 openModal, closeModal을 구현해야 한다. 하지만 useModal을 만들면 그냥 사용처에서 const { isOpened, openModal, closeModal } = useModal()로 사용할 수 있다. 엄청 간편하다!! 추상화를 하는 과정이 너무 즐겁기 때문에 이제 난 커스텀 훅을 많이 쓸 것 같다.
오늘은 여기까지!🤗🤗
