React Hook

Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

• 함수컴포넌트에서 사용되는 메소드. 클래스컴포넌트에서는 사용하지 않는다.
• class 컴포넌트의 this에서 오는 혼동에서 함수컴포넌트로 점차 바뀌었고 함수 컴포넌트에서 class컴포넌트에서 사용하는 기능들을 사용하기위해 Hook이라는 개념을 도입하게 되었다.

Hook 사용 규칙

1. 리액트 함수컴포넌트의 최상위에서만 선언해야 한다.

• 조건문 반복문 중첩된 함수 등에서 useState를 선언한다면 오류가 발생한다.
  • React는 stste,effect등 Hook을 호출되는 순서대로 저장을 해놓고 사용하기 때문에 버그발생위험을 줄이기 위해 최상위에서만 선언하도록 규칙을 정했다.

2. React 함수 컴포넌트 내에서만 사용되어져야 한다.

• React함수 컴포넌트에서 호출되어 사용할수 있는것 이므로 다른객체나 클래스에서 사용할수 없다. (설계가 그렇게 되어있다)

Memoization

• react의 Momoization은 컴포넌트 외부에 컴포넌트 내부에서 사용할 Hook들의 변수를 저장한다. 이때 변수 뿐만아니라 함수자체도 저장을 할 수 있는데 이를 통해 useCallback을 설명 할 수 있다.
• useEffect, useMemo, useCallback의 의존성배열도 여기에 저장이 된다.

useMemo

• React의 랜더링을 최적화를 위한 Hook
• 리랜더링 될때 특정 함수의 return값이 필요하고 해당 return값을 받기위해 시간이 오래걸린다면, return값을 저장해두었다가 리랜더링되었어도 해당 함수를 호출하지 않고 저장된return값을 사용하는 hook
• 굳이 연산할 필요없는 부분을 줄여 앱의 성능을 최적화한다.
• useMemo를 사용하지 않고 조건문으로 사용해도되지만 useMemo가 더 함수형프로그래밍에 적합하므로 사용하는걸 권장

//value값이 변할 때만 호출(memoization)
const result = useMemo(() => testfunc(value), [value]);

useCallback

• useMemo와 마찬가지로 랜더링 최적화를 위한 Hook

• 함수의 재사용을 위해 사용하는 Hook

• 선언된 함수를 각각 다른 변수에 할당을 하면 해당 변수들이 가리키는 주소값은 다르다. 같은 함수가 2개 선언 되어있으므로 메모리적으로 낭비일 뿐더라 해당함수가 처리되는데 오래걸린다면 그만큼 UX는 좋지 못할것이다.

  • 이런경우에 useCallback을 사용하여 기존의 함수를 랜더링될때마다 다시 선언하지 않고 사용한다.

  • 리랜더링되면 기존에 선언되어있는 함수는 리랜더링되었을 때 선언된 함수와 다른 함수가 된다. (주소값이 다름.)
    따라서 랜더링시 해당 함수를 props로 전달해주고 해당 컴포넌트에서 useEffect안에 콜백함수로 사용한다면 랜더링할때 마다
    실행될것이다.
  • useCallback을 이용하면 memoization을 사용하기 때문에 새로 선언하는게 아니고
    기존에 있던 함수의 주소값을 가져와서 할당하는것과 같으므로 useEffect는
    이함수가 새로운 함수라고 판단하지 않아서 실행되지 않는다.