hook - useMemo()

useMemo()

• memoization 비용이 많이 드는 함수의 결과값을 저장했다가 다시 연산할 필요없이 저장된 값을 반환하는 것을 말한다. 자원 사용량이 줄어든다.

   const memoizedValue = useMemo(()=>{
        //연산량이 높은 작업을 수행해서 결과를 반환한다.
        return computeExpensiveValue(의존성 변수1, 의존성 변수2,)
    },
        [의존성변수1, 의존성변수2]);

반복 작업을 하지 않아 랜더링 속도가 증가한다.

• 주의사항
  - 랜더린 시에 동시에 실행되기 때문에 렌더링 중에 값을 변경되는 함수를 전달하면 안된다.
• 의존성 배열이 빈 배열일 경우 컴포넌트 마운트 시에만 호출이 된다.

useCallBack()

• 함수와 의존성 배열을 파라미를 전달 받는다
• 기억한 변수를 반환한다.
• 의존성 배열의 변경이 일어난 후에만 실행이 된다.
  음

//컴포넌트가 마운트 될 때만 함수가 정의 돈다
    const handelClick = useCallback((event)=>{
        //클릭 이벤트 처리
    },[]);
    //다시 랜더링 될 때마다 함수가 다시 정의 된다.
    const handleClick = (event)=>{

    };

useRef()

reference obj - 특정 객체를 참조하고 있는 객체 특정 컴포넌트에 접근이 가능하다.

const refContainer = isdTef(null);
null 변경가능한 값이다.