CustomHook만들어 사용하기

const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sep','Oct','Nov','Dec'];

const sumIncome = (lists,month,year) => {

    const income = lists
    .filter((list)=>list.month===month&&list.type==='INCOME'&&Number(list.year)===year)
    .map((list)=>{
        return Number(list.amount);
    })
    .reduce((acc,cur)=>{
        return acc+cur;
    },0);
    return transformation(income);

}//월별 수입 합계를 구해주는 함수

const sumExpediture = (lists,month,year) => {

    let expediture = lists
    .filter((list)=>list.month===month&&list.type==='EXPEDITURE'&&Number(list.year)===year)
    .map((list)=>{
        return Number(list.amount);
    })
    .reduce((acc,cur)=>{
        return acc+cur;
    },0);
    if(expediture===0){
        expediture = -1*expediture;
    }
    return transformation(-1*expediture);

}

 

sumIncome과 sumExpediture이라는 두 함수는 비슷한 로직을 가지고 있다.

sumIncome과 sumExpediture를 하나의 CustomHook을 이용해서 CustomHook의 장점인 재사용성을 이용하도록 해보자

CustomHook은 Hook규칙에 의해 함수 컴포넌트 내에서만 호출이 가능하다. 따라서, 만들어준 CustomHook을 ShowList라는 함수형 컴포넌트 내에서 호출할 것이다.

 

비슷한 로직을 가진 sumIncome과 sumExpediture로 두 함수로 구현했던 것을 type을 전달받음으로써 하나의 CustomHook에서 type에 따른 Income의 합과 Expediture의 합을 return해주는 useGiveSum CustomHook을 만들어 보았다.

 

CustomHook을 재사용해주었다.

 

+ React 공식문서 말한 Custom Hook을 사용하는 경우는 복잡한 로직을 단순한 인터페이스 속에 숨길 수 있도록 하거나 복잡하게 뒤엉킨

컴포넌트를 풀어내도록 돕는 경우에 사용하도록 하는 것이 좋다고 하였다.