컴포넌트 내 로직 분리

[anonymousRecords]

📌 문제 상황

현재 코드를 살펴보면,

// SandwichtTable.tsx
const formatSandwichData
...
const handleDropDownChange
...
// 초기 데이터 가져오기
  useEffect(()
...
const handleDeleteAllData
...
const handleFillAllData
...

하나의 컴포넌트 내에 다양한 로직이 함께 포함되어 있다. SandwichTable 컴포넌트만을 보더라도, 포맷팅 로직, 데이터 패칭 로직, 전체 삭제 로직, 전체 추가 로직 등 여러 로직들이 혼재되어 있어 파악하기 어렵다.

따라서 관심사 분리를 통하여, 보다 읽기 쉬운 코드로 리팩토링하고자 한다.

[anonymousRecords]

feat : makeTable 유틸 함수 구현 feat : useGetSandwichData 훅 구현 fix : SandwichTable 컴포넌트 내 로직 분리