React-Hook(useMemo,useCallBack,useRef)

Memoization: 연산량이 많은 함수 계산을 저장시켜주는 메모,
의존성 배열 안의 변수가 변화하지 않는 이상 불러와지지 않으므로
앱 성능 최적화에 도움을 준다.

useMemo() : 함수의 리턴값의 반환한다.
useCallBack(): 함수의 값이 아닌 함수를 반환한다.
useRef(): 랜더링에 필요하지 않은 값을 참조하려고 할때 사용할 수 있다.

useCoustomized hook 이나 위와 같은 hook을 사용할 때 자주 나는 에러:
"too many running time"
이는 주로 버튼을 눌러서 로직을 실행시켰을 때 발생한다.
()=>{} 화살표 함수를 사용하여 눌러주었을 때 함수가 호출되도록 바꾸어준다.
그래도 안된다면
props로 전달해주는 onsubmit 등을 전달해주는
부모 컴포넌트의 함수를 화살표 함수로 바꿔준다.

(예시)

//TodoList.js

import {useMemo} from 'react';
import { filterTodos } from './utils';

export default function TodoList({todos,theme,tab}){
    const visibleTodos =useMemo(()=>filterTodos(todos,tab),
    [todos,tab]
    )

    return (
        <div className={theme}>
          <p><b>Note: <code>filterTodos</code> is artificially slowed down!</b></p>
          <ul>
            {visibleTodos.map(todo => (
              <li key={todo.id}>
                {todo.completed ?
                  <s>{todo.text}</s> :
                  todo.text
                }
              </li>
            ))}
          </ul>
        </div>
      );
    }

//filterTodos의 값이 useMemo에 사용될 예정
export function filterTodos(todos,tab){
    console.log('[ARTIFICIALLY SLOW] Filtering ' + todos.length + ' todos for "' + tab + '" tab.');
    let startTime=performance.now();

    while(performance.now()-startTime<500){
        //500보다 작으면 아무것도 하지 않는다. 
    }
    return todos.filter(todo => {
        if(tab==='all'){
            return true
        } else if(tab==='active'){
            return !todo.completed;
        }else if(tab==='completed'){
            return todo.completed;
        }
    });
}