React 커스텀 훅의 상태값을 전역으로 사용하면 안되는 이유

프로젝트에 테이블 컴포넌트를 만들일이 있었다..!

테이블 컴포넌트에 사용자와 인터렉션하는 부분이 많아서
백엔드에서 내려준 데이터 외 에 따로 UI를 위한 상태값이 많아서
따로 view model로 가공해서 사용하기로 결정!

비즈니스로직과 UI로직을 분리

- useVarinatTable 커스텀훅을 생성
- useState를 이용해 tableViewModel 상태값관리

const [tableViewModel, setTableViewModel] = useState<TableViewModel>()

문제 발생

 

테이블 데이터는 proccessingProduct라는 데이터의 속성중 하나인 variant를 이용해 tableView모델로 가공된 데이터임
아래 함수(테이블 데이터의 저장 기능을 함)로  테이블에서 사용자가 변경한 값들을 변경하기 위해 tableViewModel의 optionVariant 만 따로 뽑아서 processingProduct를 업데이트해야했음


테이블 데이터 저장 기능을 하는 updateVariant 함수 

const updateVariants = useCallback(async () => {

const {

options,

marketDisplayDiscountPercent,

customsDutyPercent,

shippingFeeType,

defaultShippingFee,

returnShippingFee,

exchangeShippingFee,

profitMargin,

} = processingProduct;

const optionVariants: OptionVariant[] = tableViewModel

.map((t) => t.optionVariants.map((v) => v.variant))

.flat();

const productPart = {

options,

optionVariants,

marketDisplayDiscountPercent,

shippingFeeType,

defaultShippingFee,

returnShippingFee,

exchangeShippingFee,

profitMargin,

customsDutyPercent,

} as DeepPartial<ProductResponseDto>;

await productApi.patchProduct(processingProduct.id, productPart);

}, [processingProduct, tableViewModel]);

문제 해결

그러나 updateVariant에는 tableViewModel의 변경사항이 반영되지 않고 있었음

 

이유인 즉슨,

useVariantTable 커스텀 훅에서 tableViewModel 상태를 useState를 사용하여 관리하고 있었는데,
이렇게 되면 전역적으로 해당 상태를 공유하는것이 아닌 해당 useVariantTable()를 호출할때마다 별개의 useState를 선언하여 컴포넌트에 주입하는 형식이 되므로 상태 변경이 당근 공유 되지 않음

그래서 현재 사용중인 zustand 전역 상태관리로 옮겨줌..!

느낀점

useVariantTable 커스텀 훅에 응집도 있게 개발했었는데

viewModel을 stor를 이용해 전역상태 값으로 사용하는게 조금 찝찝했다...

백엔드에서 내려준 DTO 이외에 view를 이용한 상태값이 추가가 필요할때 좋은 방법을 좀 더 탐구해봐야 겠다..

아래 글을 참고해 잘 알려진 UI패턴을 좀 더 탐구해보자!
https://velog.io/@eunbinn/modularizing-react-apps