최적화1 useMemo사용하기

컴퍼넌트가 리렌더링이 될 때 함수가 실행되지 않도록 하여 연산을 줄이는 방법이다.

const getDiaryAnalysis = ()=>{
    console.log('일기 분석 시작');
    const goodCount = data.filter((it)=>{
       return it.emotion>=3;
    }).length;
    const badCount  =  data.length - goodCount;
    const goodRatio = (goodCount/data.length) *100;
    
    return {goodCount,badCount,goodRatio};
  };

  const {goodCount,badCount,goodRatio} = getDiaryAnalysis();

다음 코드는 일기를 분석하는 코드이다 컴퍼넌트가 리렌더링이 될때 이 컴퍼넌트는 실행이 된다.즉 일기장을 삭제 했을 때도 실행이 되지만 일기장을 수정 할 때도 실행이 된다. 왜냐하면 일기장의 데이터를 useState의 상태로 저장되었기 때문에 값이 바뀌면 리렌더링이 된다. 불필요한 연산을 방지 하기 위해서 다음과 같이 useMemo를 사용한다.

  const getDiaryAnalysis = useMemo(()=>{
    console.log('일기 분석 시작');
    const goodCount = data.filter((it)=>{
       return it.emotion>=3;
    }).length;
    const badCount  =  data.length - goodCount;
    const goodRatio = (goodCount/data.length) *100;
    
    return {goodCount,badCount,goodRatio};
  },[data.length]//길이가 변하지 않으면 실행하지 않는다.
  );
  // 비구조 할당
  const {goodCount,badCount,goodRatio} = getDiaryAnalysis;

주의할점은 usMemo는 콜백함수를 리턴을 받기 때문에 기존 함수는 변수가 된다.즉 이말은 값을 반환한다는 말이다. 또한 두번째 파라미터로 의존성 배열을 받는다.